HTMLTableSectionElement：insertRow() 方法

相关文章推荐

纯真的炒饭 · MongoDB数据库中更新与删除数据 - ...· 3 月前 ·

体贴的红金鱼 · 在 Office 加载项中使用 ...· 3 月前 ·

满身肌肉的八宝粥 · 【Day31】ChatGPT請教教我：Jes ...· 2 月前 ·

小胡子的小虾米 · 万隆精神激励全球南方国家联合自强· 5 月前 ·

月球上的啄木鸟 · 从《2020抖音音乐生态数据报告》，读短视频 ...· 7 月前 ·

被表白的针织衫 · C# ...· 1 年前 ·

傲视众生的山寨机 · 如何在Django中实现主从关系的数据表格视 ...· 1 年前 ·

没有腹肌的胡萝卜 · 精选干货 | ...· 2 年前 ·

HTMLTableSectionElement 接口的 insertRow() 方法在给定的表格分段元素（ <thead> 、 <tfoot> 或 <tbody> ）插入一个新行（ <tr> ），然后返回新行的引用。


   insertRow()

将行直接插入到分段（section）中，该行不需要像使用


    Document.createElement()

创建新的


   <tr>

元素那样单独追加。

<button id="add">添加一行</button> <button id="remove">移除最后一行</button> <div>表格主体有 <output>1</output> 行。</div>

table {
  border-collapse: collapse;
  border: 1px solid black;
button {
  margin: 1em 1em 1em 0;
    JavaScript

    js
// 获取相关接口元素
const bodySection = document.querySelectorAll("tbody")[0];
const rows = bodySection.rows; // 集合是动态的，因此其总是最新的
const rowNumberDisplay = document.querySelectorAll("output")[0];
const addButton = document.getElementById("add");
const removeButton = document.getElementById("remove");
function updateRowNumber() {
  rowNumberDisplay.textContent = rows.length;
addButton.addEventListener("click", () => {
  // 在主体的末尾添加一个新行
  const newRow = bodySection.insertRow();
  // 在新行内添加单元格
  ["A", "B", "C"].forEach(
    (elt) => (newRow.insertCell().textContent = `${elt}${rows.length}`),
  // 更新行计数
  updateRowNumber();
removeButton.addEventListener("click", () => {
  // 从主体删除行
  bodySection.deleteRow(-1);
  // 更新行计数
  updateRowNumber();
        Specification
rows
vAlign
实例方法
deleteRow()
insertRow()
继承
HTMLElement
Element
Node
EventTarget
HTML DOM 的相关页面
BeforeUnloadEvent
DOMStringMap
ErrorEvent
HTMLAnchorElement
HTMLAreaElement
HTMLAudioElement
HTMLBRElement
HTMLBaseElement
HTMLBodyElement
HTMLButtonElement
HTMLCanvasElement
HTMLDListElement
HTMLDataElement
HTMLDataListElement
HTMLDialogElement
HTMLDivElement
HTMLDocument
HTMLElement
HTMLEmbedElement
HTMLFieldSetElement
HTMLFormControlsCollection
HTMLFormElement
HTMLFrameSetElement
HTMLHRElement
HTMLHeadElement
HTMLHeadingElement
HTMLHtmlElement
HTMLIFrameElement
HTMLImageElement
HTMLInputElement
HTMLLIElement
HTMLLabelElement
HTMLLegendElement
HTMLLinkElement
HTMLMapElement
HTMLMediaElement
HTMLMenuElement
HTMLMetaElement
HTMLMeterElement
HTMLModElement
HTMLOListElement
HTMLObjectElement
HTMLOptGroupElement
HTMLOptionElement
HTMLOptionsCollection
HTMLOutputElement
HTMLParagraphElement
HTMLPictureElement
HTMLPreElement
HTMLProgressElement
HTMLQuoteElement
HTMLScriptElement
HTMLSelectElement
HTMLSourceElement
HTMLSpanElement
HTMLStyleElement
HTMLTableCaptionElement
HTMLTableCellElement
HTMLTableColElement
HTMLTableElement
HTMLTableRowElement
HTMLTemplateElement
HTMLTextAreaElement
HTMLTimeElement
HTMLTitleElement
HTMLTrackElement
HTMLUListElement
HTMLUnknownElement
HTMLVideoElement
HashChangeEvent
History
ImageData
Location
MessageChannel
MessageEvent
MessagePort
Navigator
PageRevealEvent
PageSwapEvent
PageTransitionEvent
Plugin
PluginArray
PromiseRejectionEvent
RadioNodeList
UserActivation
ValidityState
Window
WorkletGlobalScope
指南
在 JavaScript 中通过 queueMicrotask() 使用微任务
深入：微任务与 Javascript 运行时环境