关于jquery：当我使用Javascript单击按钮时，如何在表中添加新行


How do I add a new row in a table when I click on a button using Javascript

本问题已经有最佳答案，请猛点这里访问。

大家好，我的代码有问题。 每当我点击添加产品时，我想添加一个具有相同字段的新行。 但是，当我运行代码并单击添加产品时，它不起作用。

这是HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow(concierge)"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow(concierge)"/>

以及我用于删除和添加的脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type ="text";
    element1.name="itemname";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type ="text";
    element2.name ="itemcode";
    cell3.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type ="text";
    element3.name ="description";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type ="text";
    element4.name ="quantity";
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type ="text";
    element5.name ="price";
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type ="file";
    element6.name ="image";
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type ="checkbox";
    element7.name ="check";


}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
    }catch(e) {
        alert(e);
    }
}

预先感谢您的帮助

礼宾应该是"礼宾"

并将element3的cell3更改为cell2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type ="text";
    element1.name="itemname";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type ="text";
    element2.name ="itemcode";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type ="text";
    element3.name ="description";
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type ="text";
    element4.name ="quantity";
    cell4.appendChild(element4);

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type ="text";
    element5.name ="price";
    cell5.appendChild(element5);

    var cell6 = row.insertCell(5);
    var element6 = document.createElement("input");
    element6.type ="file";
    element6.name ="image";
    cell6.appendChild(element6);

    var cell7 = row.insertCell(6);
    var element7 = document.createElement("input");
    element7.type ="checkbox";
    element7.name ="check";


}

function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
    }catch(e) {
        alert(e);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<table class="table" id="concierge">
<th>Item Name</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Image</th>
<tr>
<td><input type="text" name="itemname" id="itemname" style="border: none"/></td>
<td><input type="text" name="itemcode" id="itemcode" style="width:50%; border:none"/></td>
<td><input type="text" name="description" id="description" style="border:none;"/></td>
<td><input type="text" name="quantity" id="quantity" style="width:50%; border: none"/></td>
<td><input type="text" name="price" id="price" style="width:50%; border: none"/></td>
<td><input type="file" name="image" id="image" style="border:none"></td>
<td><input type="checkbox" name="check" placeholder="Delete"></td>
</tr>
</table>
<input type="button" name="add" value="Add Product" onclick="addRow('concierge')"/>
<input type="button" name="delete" value="Delete Product" onclick="deleteRow('concierge')"/>