HTMLTableSectionElement：insertRow() 方法

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

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

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

乖乖的斑马 · How do I access ...· 1 周前 ·

暴躁的机器猫 · 模块方法 - Rspack· 1小时前 ·

很拉风的灭火器 · CommonJS 与 ESM 模块异同及 ...· 1小时前 ·

叛逆的豌豆 · 台大公衛碩士學程· 5 月前 ·

挂过科的爆米花 · 比尔·盖茨：人工智能变革前夜的展望 | ...· 12 月前 ·

瘦瘦的小摩托 · javax.validation.Unexp ...· 1 年前 ·

睿智的玉米 · 关于对杭州西站枢纽天元公学（西站校区）项目规 ...· 1 年前 ·

越狱的橙子 · 一耽女孩官网版网页入口下载-一耽女孩官网版网 ...· 1 年前 ·

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 运行时环境