Question

我已经查看了table和表体方法，但没有提到如何插入HTMLTableRowElement。有人知道将HTMLTableRowElement插入表体的好方法吗？

const tbody = document.getElementsByTagName('tbody')[0];
// Only inserts an empty row
// Want to insert a HTMLTableRowElement that I've parsed using jsdom
tbody.insertRow();

修改：使用@frontend_dev指南，看起来jsdom没有使用本机DOM元素。因此解决方案可能类似于以下内容：

let rows_rep = '';
jsdom.env(html_with_tr, function(err, w) {
  rows_rep = w.document.getElementsByTagName('tr')[0].outerHTML; 
}

const tbody = document.getElementsByTagName('tbody')[0];
const newRow = tbody.insertRow();
newRow.innerHTML = rows_rep;

Answer 1

给定一个包含您要添加的行的HTML字符串，您可以在不使用jsdom的情况下获取该行，并将其附加到当前文档中的表中：

＆＃13;

// Sample HTML string:
var html = `<html>
<body>
   <h1>my title</h1>
   <table><tr><td>dynamicly added row</td></tr></table>
   <p>other text in here</p>
</body>
</html>`;

// Create in-memory element and load HTML into it:
var span = document.createElement('span');
span.innerHTML = html;
// Get the row element out of it, and append it:
var tr = span.querySelector('tr');
var tbody = document.querySelector('tbody');
tbody.appendChild(tr);

＆＃13;

<table border=1>
   <tr><td>existing row</td></tr>
</table>

＆＃13;

如何将HTMLTableRowElement插入表体？

1 个答案: