动态添加行时表不回流

我正在动态地向表中添加一行。问题是，当添加时，浏览器似乎不能正确地回流，并且所有数据都进入新行的第一个单元格，而不是分散在它上。这听起来有点奇怪，所以我在下面做了一个测试用例。据我所知，行被正确添加到正确的地方，这发生在所有浏览器(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>

如果使用JQuery，就容易多了:

var string = "<tr><td>Extra value 1</td><td>Extra value 2</td></tr>";
function addrow() {
    $('#table_data').append($(string));
}

您可以使用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);
        }

相关内容

最新更新

热门标签：