javaScript将一些标签动态添加到HTML后，我的设计按原样进行了更改，我该如何解决这个问题

Question

我有带有表和select选项元素的HTML，当用户更改选择时，JavaScript向表中添加了额外的行，但是表的设计和感觉也发生了变化。

这是我的代码

<table class="table table-bordered table-hover" id="POITable">
    <thead>
        <tr>
            <th>S.No</th>
            <th>Item Description</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd grade">
            <td>1</td>
            <td>
                <select name="project_no" class="form-control" onchange="insRow()" style="border-color: #fff; width:100%;">
                    <option value="all">Select Project No</option>
                    <option value="1">466</option>
                    <option value="2">566</option>
                    <option value="3">101</option>
                    <option value="all">all</option>
                </select>
            </td>
            <td>
                <input type="text" class="form-control" style="border-color: #fff; width:50px;" />
            </td>
        </tr>
    </tbody>

function deleteRow(row) {
    var i = row.parentNode.parentNode.rowIndex;
    document.getElementById('POITable').deleteRow(i);
}


function insRow() {
    console.log('hi');
    var x = document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;
    var inp1 = new_row.cells[1].getElementsByTagName('select')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.getElementsByTagName("tbody")[0].appendChild(new_row);
}

我的设计首先看起来像这样：

当获取动态信息时，它将如下所示：

Answer 1

您应该附加到<tbody>元素，而不是<table>元素本身。 代替

x.appendChild( new_row );

你可以用

document.querySelector('tbody').appendChild( new_row );

http://jsfiddle.net/kwg85z7e/

如果页面上有多个表，则必须使用更明确的选择器-> document.querySelector('#POITable tbody').appendChild( new_row );

Answer 2

您将在tbody之外添加新字段。

 function insRow() {
    console.log('hi');
    var x = document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;
    var inp1 = new_row.cells[1].getElementsByTagName('select')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    x.getElementsByTagName("tbody")[0].appendChild(new_row);
}

jsfiddle在这里： https ://jsfiddle.net/usyze4s0/2/

Answer 3

更改x.appendChild( new_row ); 使用x.querySelector('tbody').appendChild( new_row );