将行插入表中

Posted 2023-05-07

【中文标题】将行插入表中

【英文标题】：Insert rows into table

【发布时间】：2010-10-10 21:30:41

【问题描述】：

在 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 或任何其他框架都不算数。

【参考方案1】：

这是在 how he got IE to do tbody.innerHTML="<tr>..." 上实现 IE 的 innerHTML= 的人写的一篇很棒的文章：

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

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

编辑：@mkoryak，你的评论告诉我你的想象力为零，不值得回答。但无论如何我都会取笑你。你的观点：

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

什么？他正在向table 元素中插入行（他有一个 html 字符串）。

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

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

>而且文章很旧

我再也不会帮助你了；）

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

【讨论】：

哈哈哈，今天才读到！这是一个很好的阅读。 reddit 万岁。 :D

是的，我今天也读到了。他没有插入我需要的东西，他还使用了一个额外的隐藏元素，而且文章也很旧

@crescentfresh 是的：我在我的旅行中看到了许多版本的代码，这些代码可以实现他所说的。我希望有人会写一些代码，然后我可以查看它并将其与其他代码进行比较，看看哪个更好。要求人们编码总是让我遇到麻烦：P

哎呀，伙计。对不起，我的提问冒犯了你。是的，我可以自己写这个。我想看看其他人会怎么做，因为我知道有人可以比我做得更好。请再次帮助我，否则我会哭。

@mkoryak：最后一行是我很幽默 ;) 读它时停顿一下，然后快速地说“我再也不会帮助你了”。实际上重新阅读它我意识到我忘记了笑脸;）

【参考方案2】：

像 jQuery 那样做，例如。在其周围添加<table> 和</table>，插入文档并将您想要的节点移动到您想要它们的位置并丢弃临时元素。

【参考方案3】：

代码最终是这样的：

    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 中的脚本。

【参考方案4】：

我遇到了同样的问题（和很多其他人一样），在玩了很多之后，这就是我要解决的问题。

您必须通过 document.createelement ('tr') 创建一个 tr，然后创建一个 td，方法相同。 将 td 附加到 tr，将 tr 附加到 tbody（不是表）然后您可以使用您创建的 td 的 innerhtml 并且它将起作用。 这是我使用的ie8。基本上，表格结构必须使用 createelement 制作，但其余部分可以是 innerHTMLed。我在 IE8 调试器中观看，它会说它会添加它（如果我做了 tr.innerhtml="blah"）并且没有给出错误，但它不会显示，并且 html dom 视图显示非常破碎表（没有 td 出现过，但 /td 出现了）

所以当我最终通过 createelement 调用执行 tr AND td 时，它创建了一个外观正确的 dom 并正确绘制了页面。