Question

我动态地向表中添加一行。问题是浏览器在添加时似乎没有正确回流，并且所有数据都进入新行的第一个单元格，而不是分布在它上面。这听起来有点奇怪，所以我在下面做了测试用例。据我所知，该行正确添加到正确的位置，这种情况发生在所有浏览器中（Chrome 36.0，FF 31.0，IE 11.0），所以我想知道我是否在做某事错...

<!doctype html>
<html>
<head>
    <title>Table management page</title>

    <script type="text/javascript">

        var string = "<tr><td>Extra value 1</td><td>Extra value 2</td></tr>";

        function addrow() {
            var parser=new DOMParser();
            var xml=parser.parseFromString(string,'text/xml');
            var rows = xml.getElementsByTagName('tr');
            document.getElementById('table_data').appendChild(rows[0]);
        } 

    </script>
</head>
<body>
    <table id="datatable">
        <thead>
            <tr><th>Column 1</th><th>Column 2</th></tr>
        </thead> 
        <tbody id="table_data">
            <tr><td>Value 1</td><td>Value 2</td></tr>
        </tbody>
    </table>
    <input type='button' onclick='addrow();' value='Add a row' />
</body>
</html>

Answer 1

您可以使用inserRow和insertCell方法

 function addrow() {
            var parser=new DOMParser();
            var xml=parser.parseFromString(string,'text/xml');
            var row=document.getElementById('table_data').insertRow();

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// Add some text to the new cells:
cell1.innerHTML = "Extra value 1";
cell2.innerHTML = "Extra value 2";

        }

编辑 - 使用createElement

 function addrow() {
            var parser=new DOMParser();
            var xml=parser.parseFromString(string,'text/xml');
            var rows = xml.getElementsByTagName('tr');
            var trs= document.createElement('tr');
            var td1=document.createElement('td');
            td1.innerHTML='Value 1';
            trs.appendChild(td1);
            var td2=document.createElement('td');
            td2.innerHTML='Value 2';
            trs.appendChild(td2);
            document.getElementById('table_data').appendChild(trs);
        }

Answer 2

如果使用JQuery，则更容易：

var string = "<tr><td>Extra value 1</td><td>Extra value 2</td></tr>";

function addrow() {
    $('#table_data').append($(string));

}

当动态添加行时，表不会回流

2 个答案: