- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我读到 createDocumentFragment 比在 for 循环中将元素一个一个地附加到 DOM 快得多,例如见here .
我想做什么:
我的问题:
如果已有列,我真的不知道如何替换现有列。另一方面附加是没有问题的。
我的 JSfiddle:http://jsfiddle.net/LEqG9/2/
HTML
<table id = "table">
<tr>
<th>Name</th>
<th>Rating</th>
</tr>
<tr>
<td>A.H.Hattray </td>
<td id = "row0"></td>
</tr>
<tr>
<td>Icke_eben </td>
<td id = "row1"></td>
</tr>
<tr>
<td>John_Doe123 </td>
<td id = "row2"></td>
</tr>
</table>
Javascript
var rating = [1, 10, 3];
var fragment = document.createDocumentFragment();
for (var i = 0, len = rating.length; i < len; i++){
var element = document.createElement('tr');
element.innerHTML = rating[i];
fragment.appendChild(element);
}
document.getElementById('table').appendChild(fragment); //I know here should be the code to replace the second column!
最佳答案
以下代码演示了可以在 DocumentFragment 中操作现有表格。
var rating = [1, 10, 3];
var theTable = document.getElementById('table');
var frag = document.createDocumentFragment();
frag.appendChild(theTable);
var col2 = frag.querySelectorAll('tr td:nth-of-type(2)');
for (var i=0; i < col2.length; i++) {
col2[i].innerHTML = rating[i];
}
// it is also possible to use insertCell and deleteCell
var theRows = frag.querySelectorAll('tr');
for (var i=0; i < theRows.length; i++) {
var x = theRows[i].insertCell(1);
if (i > 0)
x.innerHTML = 'new one';
else
x.innerHTML = 'The Header';
}
document.body.appendChild(frag);
(使第一行中的新单元格成为 TH 元素,而不是 TD 需要更多工作,使用 createElement
和 appendChild
或 insertBefore
.)
如果您单步执行此操作,则表格在附加到片段时会从 DOM 中删除,然后在片段附加到正文时重新出现。
关于javascript - 使用 createDocumentFragment 替换表中的现有列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23942782/
我对以下示例中的 createDocumentFragment() 有疑问: Click the button to make changes to a list item, using the cr
我正在尝试通过对应用程序中的现有表进行一些更改来重新格式化表。我在互联网上搜索了以下错误,但没有找到任何解决方案。 我收到的错误如下: Cannot read property 'createDocu
我试图从 openwheater 应用程序打印表中的一些 JSON 数据。我在互联网上搜索了解决方案,但找不到真正的解决方案。我是初学者,所以这可能是一个非常简单的错误 希望有人能帮助我走上正确的道路
我正在学习 HTML DOM 模型,但遇到了一个问题。我无法理解 createDocumentFragment() 方法在以下代码中的工作原理。 HTML 代码: CoffeeTea Try i
在一个函数中,我经常创建 DocumentFragment 对象,因此我喜欢在过程完成后将其删除。DocumentFragment 没有父级,因此我无法使用例如: node.parentNode.re
这个问题已经有答案了: Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? (5 个回答) 已关闭 4 年前。 所以
我读到 createDocumentFragment 比在 for 循环中将元素一个一个地附加到 DOM 快得多,例如见here . 我想做什么: 在文档片段中创建一个表列。此列应包含数组中的数字(例
如果您使用 document.createDocumentFragment() 创建一个 DocumentFragment,将子项附加到它,然后将缓冲区附加到某物,缓冲区的所有子项似乎都消失了。示例:
我正在尝试实现 magnific popup 我有以下链接load json 当我单击链接时,灯箱处于加载状态并抛出异常,如下所示 Uncaught TypeError: Cannot call me
我试图找出使用 document.createDocumentFragment 之间的区别与使用 HTML 相比元素。 他们在行为或表现上有区别吗? 最佳答案 两个和 document.create
我正在玩弄一个函数并得到 b.createDocumentFragment is not a function (jQuery) 我的职能是 function tweetCount(url) {
我正在尝试运行此循环,以便创建特定数量的列并向每列添加正方形。目标是在一个循环中完成所有这一切,但我的循环将成功运行一次,然后退出。 function gridBuilder(columns,rows
是否可以在将元素附加到文档之前在 documentFragment 内部通过其 ID 引用元素? 例如: var docFragment = document.createDocumentFragme
我正在尝试将新创建的元素附加到 div,然后将 div 附加到文档片段,但它没有按预期工作。请帮我确定我缺少的东西。 //array of values to look up let channels
如何使用 createDocumentFragment 一次创建七个嵌套的 div 元素? 我想创建一个容器 A,其中包含 A1、A2、A3 和 A4,然后在 A2 中创建 A2a 和 A2b。 注意
我正在尝试获取网页并加载到 bootstrap 2.3.2 弹出窗口中。到目前为止,我有: $.ajax({ type: "POST", url: "AjaxUpdate/getHtml",
在页面启动期间,我尝试向 DOM 添加一个元素。 我有以下代码: $(document).ready(function () { $(document).prepend(""); }); 我已
我想用 Javascript 添加大量 html,当我尝试添加 时出现问题之后一切正常: 这是我的 HTML: 这是我的脚本: var sec_nom='wa'; document.querySe
我目前正在使用 Meteor 框架构建一个网站。现在,我正在尝试获取它,以便当我单击 DOM 中的某个元素(通过 handle 呈现)时,新元素会附加到当前单击的元素。我正在使用 jquery 执行此
据我所知,文档片段的好处是它们不会导致回流事件,直到片段被插入到 DOM 中。听起来很合理,但似乎非 DOM 元素也不会导致重排。 例如: // with document fragment var
我是一名优秀的程序员,十分优秀!