当前位置：文江博客话题详情

JavaScript html-table innerhtml

将行插入表中

发布于 2024-07-14 05:53:46 字数 395 浏览 6 评论 0 原文

在 IE 中将 X 行插入表中的最佳纯 JavaScript 方法是什么？

表 html 如下所示：

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

我需要做的是删除旧的正文，并插入一个包含 1000 行的新正文。我有 1000 行作为 javascript 字符串变量。

问题是IE中的table没有innerHTML功能。我见过很多黑客可以做到这一点，但我想看看你最好的一个。

注意：使用 jquery 或任何其他框架不算。

原文

What is the best plain javascript way of inserting X rows into a table in IE.

The table html looks like this:

<table><tbody id='tb'><tr><td>1</td><td>2</td></tr></tbody></table>

What I need to do, is drop the old body, and insert a new one with 1000 rows. I have my 1000 rows as a javascript string variable.

The problem is that table in IE has no innerHTML function. I've seen lots of hacks to do it, but I want to see your best one.

Note: using jquery or any other framework does not count.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

溺ぐ爱和你が 2024-07-21 05:53:46

这是一篇由在他如何让 IE 执行tbody.innerHTML="..."：

一开始我以为IE不是
能够执行重绘
使用innerHTML修改表格，但是
然后我想起我是
对此限制负有责任！

顺便说一句，他使用的技巧基本上是所有框架如何对 table/tbody 元素执行此操作。

编辑：@mkoryak，你的评论告诉我你的想象力为零，不值得得到答案。但无论如何我都会逗你开心。您的积分：

> 他没有插入我需要的东西

什么？他正在将行（作为 html 字符串）插入到 table 元素中。

> 他还使用了一个额外的隐藏元素。

该元素的目的是说明 IE 需要的只是一个“上下文”。您可以使用动态创建的元素 (document.createElement('div'))。

> 而且这篇文章已经很旧了，

我再也不会帮助你了；）

但是说真的，如果你想了解其他人是如何实现它的，请查看 jQuery.clean()，或 Prototype 的 Element._insertionTranslations。

回复收藏 0 原文

遗心遗梦遗幸福 2024-07-21 05:53:46

像 jQuery 那样做，例如。在其周围添加 和

，插入到文档中并将所需的节点移动到所需的位置，然后放弃临时元素。

回复收藏 0 原文

强辩 2024-07-21 05:53:46

代码最终是这样的：

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

预先存在的东西：一个表，其主体的 id 为“bodyId”。 $body 是一个全局变量（或者函数上有一个闭包），并且其中也有一些 jquery，因为 IE 不会评估动态插入 html 中的脚本。

the code ended up being this:

    if($.support.scriptEval){
    //browser needs to support evaluating scripts as they are inserted into document
        var temp  = document.createElement('div');
    temp.innerHTML = "<table><tbody id='"+bodyId +"'>"+html;
    var tb = $body[0];
    tb.parentNode.replaceChild(temp.firstChild.firstChild, tb);
    temp = null;
    $body= $("#" + bodyId);
    } else {
    //this way manually evaluates each inserted script
        $body.html(html);
    }

Things that beed to exist beforehand: a table that has a body with id of 'bodyId'. $body is a global variable (or the function has a closure on it), and there is a bit of jquery in there too, because IE does not evalute scripts that are inserted into the html on the fly.

回复收藏 0 原文

我的鱼塘能养鲲 2024-07-21 05:53:46

我也遇到了同样的问题（就像很多其他人一样），经过大量的尝试后，我开始工作了。

您必须通过 document.createelement ('tr') 创建一个 tr，然后以相同的方式创建一个 td。
将 td 附加到 tr，将 tr 附加到 tbody（不是表），然后您可以将您创建的 td 嵌入到 innerhtml 中，它将起作用。
这是我用的ie8。基本上，表格结构必须使用 createelement 来制作，但其余部分可以是innerHTMLed。我在 IE8 调试器中执行此操作，它会说它会添加它（如果我执行了 tr.innerhtml="blah"）并且没有给出错误，但它不会显示，并且 html dom 视图显示非常损坏所以当我最终通过 createelement 调用执行 tr AND td 时，它

创建了一个看起来正确的 dom 并正确绘制了页面。