1

我正在动态地向表中添加一行。问题是浏览器在添加时似乎没有正确重排，并且所有数据都进入新行的第一个单元格，而不是分散在其中。这听起来有点奇怪，所以我在下面制作了测试用例。据我所知，该行已正确添加到正确的位置，这发生在所有浏览器（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>
4

2 回答 2

0

if use JQuery , it much easier:

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

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

}
于 2014-08-25T09:29:52.293 回答
0

您可以使用 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);
        }
于 2014-08-25T09:23:35.967 回答