javascript - 在 javaScript 动态添加一些标签到我的 HTML 之后我的设计改变了，我该如何解决这个问题

Question

我有带有表格和选择选项元素的 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 );