个人中心
gpt4 book ai didi

javascript - 动态添加行时表不会回流

转载 作者：行者123 更新时间：2023-11-28 08:00:27 25 4
gpt4 key购买 nike

我正在向表中动态添加一行。问题在于，添加时浏览器似乎无法正确回流，并且所有数据都进入新行的第一个单元格，而不是分散在其中。这听起来有点奇怪，所以我在下面做了测试用例。据我所知，该行已正确添加到正确的位置，并且这种情况发生在所有浏览器(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));

}

关于javascript - 动态添加行时表不会回流，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25482437/

25 4 0
文章推荐： javascript - 验证 Javascript 文件上的签名
文章推荐： c++ - 将用户界面添加到图像查看器插件
文章推荐： c++ - 在内存中渲染用户界面
文章推荐： javascript - 有没有一种简单的方法使用 IE9 上传带有预览的图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com