Javascript 如何从给定行创建html表中带有输入字段的动态行_Javascript_Html

Javascript 如何从给定行创建html表中带有输入字段的动态行

javascript html

Javascript 如何从给定行创建html表中带有输入字段的动态行,javascript,html,Javascript,Html,我是Html和javascript的新手。我想在单击按钮的同时在表中创建带有输入字段的动态行，该行的数量由用户给定。在我的代码中，行是动态创建的，但不是追加prevoius行。它是新创造的。但，若表已经创建，我想追加行这是我的代码：函数createTable（）{ var a； a=document.getElementById（'tb1'）。值；如果（a==“”）{ 警报（“请输入一些数值”）； }否则{ var rows=“项目名称数量数量类型金额”；对于（变量i=0；i1）{ v

我是Html和javascript的新手。我想在单击按钮的同时在表中创建带有输入字段的动态行，该行的数量由用户给定。在我的代码中，行是动态创建的，但不是追加prevoius行。它是新创造的。但，若表已经创建，我想追加行

这是我的代码：

函数createTable（）{
var a；
a=document.getElementById（'tb1'）。值；
如果（a==“”）{
警报（“请输入一些数值”）；
}否则{
var rows=“项目名称数量数量类型金额”；
对于（变量i=0；i


div{
背景：红色；
保证金：5px；
}
桌子{
边框：2件纯黑；
}
运输署{
填充：10px；
边框：1px纯色浅灰色；
}

点击我！
首先，在包装th
时缺少
，在tr
中包装th
，对于新的行
要附加上一行

，必须使用javascript的

insertRow

属性

这是您修改过的代码片段

谢谢


div{
背景：红色；
保证金：5px；
}
桌子{
边框：2件纯黑；
}
运输署{
填充：10px；
边框：1px纯色浅灰色；
}
函数createTable（）{
var a；
a=document.getElementById（'tb1'）。值；
var length=document.getElementById（'table'）.rows.length；
如果（a==“”）{
警报（“请输入一些数值”）；
}否则{
如果（长度>1）{
var table=document.getElementById（“表格”）；
//创建一个空元素并将其添加到表的第一个位置：
var row=表格.插入行（长度）；
//在“新”元素的第一和第二位置插入新单元格（元素）：
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
cell1.innerHTML=“”；
cell2.innerHTML=“”；
cell3.innerHTML=“”；
cell4.innerHTML=“”；
}否则{
var rows=“项目名称数量数量类型金额”；
对于（变量i=0；i

首先，在包装

th

时缺少

，在

tr

中包装

th

，对于新的

行

要附加上一行，必须使用javascript的

insertRow

属性

这是您修改过的代码片段

谢谢


div{
背景：红色；
保证金：5px；
}
桌子{
边框：2件纯黑；
}
运输署{
填充：10px；
边框：1px纯色浅灰色；
}
函数createTable（）{
var a；
a=document.getElementById（'tb1'）。值；
var length=document.getElementById（'table'）.rows.length；
如果（a==“”）{
警报（“请输入一些数值”）；
}否则{
如果（长度>1）{
var table=document.getElementById（“表格”）；
//创建一个空元素并将其添加到表的第一个位置：
var row=表格.插入行（长度）；
//在“新”元素的第一和第二位置插入新单元格（元素）：
var cell1=行插入单元格（0）；
var cell2=行插入单元格（1）；
var cell3=行插入单元格（2）；
var cell4=行插入单元格（3）；
cell1.innerHTML=“”；
cell2.innerHTML=“”；
cell3.innerHTML=“”；
cell4.innerHTML=“”；
}否则{
var rows=“项目名称数量数量类型金额”；
对于（变量i=0；i

您所做的是每次为表设置新值。实际上，您要做的是使用“appendChild”函数将数据追加到表中。也可以使用

下面是一个处理更改的工具（使用js appendChild）：


div{
背景：红色；
保证金：5px；
}
桌子{
边框：2件纯黑；
}
运输署{
填充：10px；
边框：1px纯色浅灰色；
}
函数createTable（）{
var a；
a=document.getElementById（'tb1'）。值；
如果（a==“”）{
警报（“请输入一些数值”）；
}否则{
var rows=“项目名称数量数量类型金额”；
对于（变量i=0；i


我建议学习使用jquery。无论如何，这里有一些关于我提到的函数的信息：
jquery及其“append”函数
有关子对象的信息-
jquery append-
您所做的是每次为表设置新值。实际上，您要做的是使用“appendChild”函数将数据追加到表中。也可以使用
他
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            background: red;
            margin: 5px;
        }

        table {
            border: 2px solid black;
        }

        td {
            padding: 10px;
            border: 1px solid lightgrey;
        }

    </style>

    <script>

        function createTable() {
            var a;

            a = document.getElementById('tb1').value;

            if (a == "") {
                alert("Please enter some numeric value");
            } else {
                var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
                for (var i = 0; i < a; i++) {
                let tr = document.createElement("tr");
                tr.innerHTML = "<td><input type='text' name='" + "name".concat(i+1) + "'></td><td><input type='text' name='" + "quantity".concat(i+1) + "'></td><td><input type='text' name='" + "qtype".concat(i+1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i+1) + "'></td>";
                document.getElementById("table").appendChild(tr);
                }                
            }
        }
    </script>
</head>
<body>
<input type="text" id="tb1"/>
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table"  name="table1" required>
</table>
</body>
</html>