Javascript - 使用 document.execcommand 在现有表中添加行但我犯了一些错误但我不知道它在哪里

Question

我正在开发编辑器，但我无法理解这个范围概念。 我想使用 exec 命令添加表的第一行。 我在下面插入了一张图片。

我预期的输出图像

 function addRow() { let range = document.createRange(); let sel = window.getSelection(); let el = document.querySelector("tbody"); range.setStartBefore(el.firstChild); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); let b = `<tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr>`; document.execCommand("insertHTML", false, b); }

 <table class="table table-bordered" contenteditable="true"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> <button onclick="addRow()">Add Row</button>

Answer 1

您可以使用insertAdjacentHTML将 HTML 文本插入到任何位置。

 function addRow() { let el = document.querySelector("tbody"); let newRow = getRow(["Mary","Moe","mary@example.com"]); el.insertAdjacentHTML("afterbegin", newRow); } function getRow(dataArray) { let rowData = dataArray.map(data => `<td>${data}</td>`).join(""); return `<tr>${rowData}</tr>`; }

 <table class="table table-bordered" contenteditable="true"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> <button onclick="addRow()">Add Row</button>