动态添加行时表未重排

Question

I'm adding a row to a table dynamically. 我正在向表中动态添加一行。 The problem is that the browser does not seem to reflow properly when it's added, and all the data goes into the first cell of the new row, rather than being spread across it. 问题在于，浏览器添加后似乎无法正确地重排，并且所有数据都进入新行的第一个单元格，而不是散布在整个行中。 This sounds a bit odd, so I've made test case, below. 这听起来有些奇怪，所以我在下面做了测试用例。 As far as I can tell, the row is being added properly to the correct place, and this happens in all browsers (Chrome 36.0, FF 31.0, IE 11.0), so I'm wondering if I'm doing something wrong... 据我所知，该行已正确添加到正确的位置，并且这种情况在所有浏览器（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

You can use inserRow and insertCell methods 您可以使用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";

        }

EDIT - By using createElement 编辑-通过使用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

if use JQuery , it much easier: 如果使用JQuery，则容易得多：

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

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

}

动态添加行时表未重排

问题描述

2 个解决方案

解决方案1
0 2014-08-25 09:23:35

解决方案2
0 2014-08-25 09:29:52

动态添加行时表未重排

问题描述

2 个解决方案

解决方案1 0 2014-08-25 09:23:35

解决方案2 0 2014-08-25 09:29:52

解决方案1
0 2014-08-25 09:23:35

解决方案2
0 2014-08-25 09:29:52