HTMLTableSectionElement：insertRow() 方法

相关文章推荐

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

纯真的羽毛球 · constexpr （C++） | ...· 1 周前 ·

飞奔的机器猫 · 拼多多百亿补贴再加码，中国电商竞争逻辑变道| ...· 1 年前 ·

满身肌肉的领带 · 深入学习贯彻党的二十届三中全会精神 ...· 1 年前 ·

绅士的松鼠 · 没空很忙没时间 ...· 2 年前 ·

朝气蓬勃的火柴 · 军队分房：产权归谁、如何出售？· 2 年前 ·

忐忑的保温杯 · 又一部神作新番预订！男主是孙悟空转世，“网盘 ...· 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 运行时环境