From ac05f20109d62c15ab6ddda484cc1666f14fc27e Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Thu, 26 Sep 2024 16:16:04 +0800 Subject: [PATCH 1/9] [zh-cn]: create docs for HTMLTableRowElement --- .../api/htmltablerowelement/align/index.md | 45 ++++++ .../api/htmltablerowelement/bgcolor/index.md | 39 ++++++ .../api/htmltablerowelement/cells/index.md | 111 +++++++++++++++ .../web/api/htmltablerowelement/ch/index.md | 31 ++++ .../api/htmltablerowelement/choff/index.md | 31 ++++ .../htmltablerowelement/deletecell/index.md | 127 +++++++++++++++++ .../web/api/htmltablerowelement/index.md | 60 ++++++++ .../htmltablerowelement/insertcell/index.md | 132 ++++++++++++++++++ .../api/htmltablerowelement/rowindex/index.md | 26 ++-- .../sectionrowindex/index.md | 79 +++++++++++ .../api/htmltablerowelement/valign/index.md | 45 ++++++ 11 files changed, 715 insertions(+), 11 deletions(-) create mode 100644 files/zh-cn/web/api/htmltablerowelement/align/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/bgcolor/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/cells/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/ch/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/choff/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/deletecell/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/insertcell/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/sectionrowindex/index.md create mode 100644 files/zh-cn/web/api/htmltablerowelement/valign/index.md diff --git a/files/zh-cn/web/api/htmltablerowelement/align/index.md b/files/zh-cn/web/api/htmltablerowelement/align/index.md new file mode 100644 index 00000000000000..cecbb2cc56f8ef --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/align/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLTableRowElement：align 属性 +slug: Web/API/HTMLTableRowElement/align +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`align`** 属性是一个指示如何在 {{htmlelement("tr")}} 表格行中水平对齐文本的字符串。单个单元格可以覆盖它。 + +> [!NOTE] +> 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。 + +## 值 + +可能的值： + +- `left` + - : 将文本向左对齐。使用 `text-align: left` 代替。 +- `right` + - : 将文本向右对齐。使用 `text-align: right` 代替。 +- `center` + - : 将文本居中对齐。使用 `text-align: center` 代替。 +- `justify` + - : 将文本分散到单元格中。使用 `text-align: justify` 代替。 +- `char` + - : 从不完全支持，将文本与指定字符对齐。在支持的情况下，使用 `text-align: ,` 其中字符串是单个字符。 + +## 示例 + +使用 CSS `text-align` 替代，{{cssxref("text-align")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/text-align#表格对齐)。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} +- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables) diff --git a/files/zh-cn/web/api/htmltablerowelement/bgcolor/index.md b/files/zh-cn/web/api/htmltablerowelement/bgcolor/index.md new file mode 100644 index 00000000000000..867f03563c0b31 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/bgcolor/index.md @@ -0,0 +1,39 @@ +--- +title: HTMLTableRowElement：bgColor 属性 +slug: Web/API/HTMLTableRowElement/bgColor +l10n: + sourceCommit: cdb23fdf261a071951e1e46a0a6c7bc6daa691ff +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +**`HTMLTableRowElement.bgColor`** 属性用于设置行的背景色或者检索已弃用的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/tr#bgcolor) 属性的值（如果存在）。 + +> [!NOTE] +> 此属性已弃用，且应使用 CSS 设置背景色。使用 {{cssxref("background-color")}} 属性代替。 + +## 值 + +可以使用以下值类型之一： + +- 命名的颜色，像 `red` 或 `blue` +- 十六进制代码，像 `#0000dd` + +> [!NOTE] +> 这里接受的值是 CSS 颜色值的子集。你可以在 CSS 中重用 HTML 颜色值，但不能在另一个方向上重用：未知的颜色会与预期不同。 + +## 示例 + +使用 CSS `background-color` 代替。在 {{cssxref("background-color")}} 页面有个[示例](/zh-CN/docs/Web/CSS/background-color#着色表) 可用。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableCellElement.bgColor")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/cells/index.md b/files/zh-cn/web/api/htmltablerowelement/cells/index.md new file mode 100644 index 00000000000000..eedc273edf3c3c --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/cells/index.md @@ -0,0 +1,111 @@ +--- +title: HTMLTableRowElement：cells 属性 +slug: Web/API/HTMLTableRowElement/cells +l10n: + sourceCommit: e5cb967d09849f77746f82d3526243fa956fbd8b +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableRowElement")}} 接口的 **`cells`** 只读属性返回一个行中包含单元格的动态 {{domxref("HTMLCollection")}}。`HTMLCollection` 是动态的，且当单元格添加或移除时可自动更新。 + +## 值 + +一个实时的 {{domxref("HTMLTableCellElement")}} 对象的 {{domxref("HTMLCollection")}}。 + +## 示例 + +此示例使用 `HTMLTableRowElement.cells` 展示行中单元格的数量。 + +### HTML + +```html + + + + + + + + + + + + + + + + +
C1C2C3C4C5
单元格 1单元格 2
+ + + +
第一行有 2 个单元格。
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +// 获取相关接口元素 +const bodySection = document.querySelectorAll("tbody")[0]; +const row = bodySection.rows[0]; // 选择主体部分的第一行 +const cells = row.cells; // 集合是动态的，因此总是最新的 +const cellNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateCellNumber() { + cellNumberDisplay.textContent = cells.length; +} + +addButton.addEventListener("click", () => { + // 在第一行的默认添加单元格 + const newCell = row.insertCell(); + newCell.textContent = `单元格 ${cells.length}`; + + // 更新行数 + updateCellNumber(); +}); + +removeButton.addEventListener("click", () => { + // 从主体删除行 + row.deleteCell(-1); + + // 更新行数 + updateCellNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("示例", "100%", 175)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableRowElement.insertCell()")}} +- {{domxref("HTMLTableRowElement.deleteCell()")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/ch/index.md b/files/zh-cn/web/api/htmltablerowelement/ch/index.md new file mode 100644 index 00000000000000..3e99622cbcaf08 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/ch/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLTableRowElement：ch 属性 +slug: Web/API/HTMLTableRowElement/ch +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`ch`** 属性什么都不做，它反映 {{HTMLElement("tr")}} 元素的 `char` 属性。 + +> [!NOTE] +> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。 +> +> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。 + +## 值 + +单个字符。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/choff/index.md b/files/zh-cn/web/api/htmltablerowelement/choff/index.md new file mode 100644 index 00000000000000..2ba860af33f5d0 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/choff/index.md @@ -0,0 +1,31 @@ +--- +title: HTMLTableRowElement：chOff 属性 +slug: Web/API/HTMLTableRowElement/chOff +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`chOff`** 属性什么都不做，它反映 {{HTMLElement("tr")}} 元素的 `charoff` 属性。 + +> [!NOTE] +> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。 +> +> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。 + +## 值 + +一个整数。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("text-align")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md new file mode 100644 index 00000000000000..87229f6842c918 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md @@ -0,0 +1,127 @@ +--- +title: HTMLTableRowElement：deleteCell() 方法 +slug: Web/API/HTMLTableRowElement/deleteCell +l10n: + sourceCommit: 712156520cf3aaca9f9b37d9a82831063eb9c87b +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`deleteCell()`** 方法从给定的 {{HtmlElement("tr")}} 中移除特定的行单元格。 + +## 语法 + +```js-nolint +deleteCell(index) +``` + +### 参数 + +- `index` + - : 要移除单元格的单元格索引。如果 `index` 值是 `-1` 或者等于单元格的数量，则移除行的最后一个单元格。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + +### 异常 + +- `IndexSizeError` {{domxref("DOMException")}} + - : 如果 `index` 大于单元格数或小于 `-1`，则抛出该异常。 + +## 示例 + +此示例使用 {{domxref("HTMLTableRowElement.insertCell()")}} 将新的单元格附加到行中。 + +### HTML + +```html + + + + + + + + + + + + + + + + +
C1C2C3C4C5
单元格 1单元格 2
+ + + +
第一行有 2 个单元格。
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +// 获取相关接口元素 +const bodySection = document.querySelectorAll("tbody")[0]; +const row = bodySection.rows[0]; // 选择主体部分的第一行 +const cells = row.cells; // 集合是动态的，因此总是最新的 +const cellNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateCellNumber() { + cellNumberDisplay.textContent = cells.length; +} + +addButton.addEventListener("click", () => { + // 在第一行的默认添加单元格 + const newCell = row.insertCell(); + newCell.textContent = `单元格 ${cells.length}`; + + // 更新行数 + updateCellNumber(); +}); + +removeButton.addEventListener("click", () => { + // 从主体删除行 + row.deleteCell(-1); + + // 更新行数 + updateCellNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("示例", "100%", 175)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableElement.insertRow()")}} +- 表示单元格的 HTML 元素：{{domxref("HTMLTableCellElement")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/index.md b/files/zh-cn/web/api/htmltablerowelement/index.md new file mode 100644 index 00000000000000..224f756e0dbbe3 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/index.md @@ -0,0 +1,60 @@ +--- +title: HTMLTableRowElement +slug: Web/API/HTMLTableRowElement +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{ APIRef("HTML DOM") }} + +**`HTMLTableRowElement`** 接口提供用于操作 HTML 表格中行的布局和呈现的特定属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。 + +{{InheritanceDiagram}} + +## 实例属性 + +_从其父接口 {{domxref("HTMLElement")}} 继承属性。_ + +- {{domxref("HTMLTableRowElement.cells")}} {{ReadOnlyInline}} + - : 返回一个行中包含单元格的动态 {{domxref("HTMLCollection")}}。`HTMLCollection` 是动态的，且当单元格添加或移除时可自动更新。 +- {{domxref("HTMLTableRowElement.rowIndex")}} {{ReadOnlyInline}} + - : 返回一个所在行相对于整个表格逻辑位置的数字。如果该行不属于表的一部分，则返回 `-1`。 +- {{domxref("HTMLTableRowElement.sectionRowIndex")}} {{ReadOnlyInline}} + - : 返回一个所在行相对其所属表片段中逻辑位置的数字。如果该行不是片段的部分，则返回 `-1`。 + +## 实例方法 + +_从其父接口 {{domxref("HTMLElement")}} 继承方法。_ + +- {{domxref("HTMLTableRowElement.deleteCell()")}} + - : 删除 `index` 对应的单元格。如果 `index` 值是 `-1`，则删除此行的最后一个单元格；如果索引小于 `-1` 或大于集合中单元格数量，引发值为 `IndexSizeError` 的 {{DOMxRef("DOMException")}}。 +- {{domxref("HTMLTableRowElement.insertCell()")}} + - : 返回一个表示此行新单元格的 {{domxref("HTMLTableCellElement")}}。它将插入到单元格集合中给定索引（`index`）位置的元素之前。如果 `index` 是 `-1`，则新单元格添加到集合末尾，如果 `index` 小于 `-1` 或大于集合的单元格数，则引发值为 `IndexSizeError` 的 {{DOMxRef("DOMException")}}。 + +## 已弃用的属性 + +> [!WARNING] +> 此属性已弃用，不应再使用。它们被记录下来主要是为了帮助理解旧的代码来源。 + +- {{domxref("HTMLTableRowElement.align")}} {{deprecated_inline}} + - : 一个反映 [`align`](/zh-CN/docs/Web/HTML/Element/tr#align) 属性的字符串枚举值。其指示元素内容相对于周围上下文的对齐方式，可能的值有：`"left"`、`"right"` 和 `"center"`。 +- {{domxref("HTMLTableRowElement.bgColor")}} {{deprecated_inline}} + - : 一个包含单元格背景色的字符串。它反映已弃用的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/tr#bgcolor) 属性。 +- {{domxref("HTMLTableRowElement.ch")}} {{deprecated_inline}} + - : 一个包含单字符的字符串。这个字符是用来对齐某一列所有单元格内容的基准。它反映 [`char`](/zh-CN/docs/Web/HTML/Element/tr#char) 并默认为与语言相关的小数点，例如，英语的默认值为 `'.'`，法语的默认值为 `','`。此属性是可选的，而且没有得到很好的支持。 +- {{domxref("HTMLTableRowElement.chOff")}} {{deprecated_inline}} + - : 一个包含整数的字符串，表示由 `HTMLTableRowElement.ch` 定义的字符的右侧（对于从左到右的文本；或者对于从右到左的文本的左侧）必须保留多少个字符。此属性是可选的，并没有得到很好的支持。 +- {{domxref("HTMLTableRowElement.vAlign")}} {{deprecated_inline}} + - : 一个表示枚举值的字符串，指示单元格内容必须如何对齐。它反映 [`valign`](/zh-CN/docs/Web/HTML/Element/tr#valign) 属性，可以为以下值之一：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- 实现此接口的 HTML 元素：{{HTMLElement("tr")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md new file mode 100644 index 00000000000000..d9550e977c0345 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md @@ -0,0 +1,132 @@ +--- +title: HTMLTableRowElement：insertCell() 方法 +slug: Web/API/HTMLTableRowElement/insertCell +l10n: + sourceCommit: b71d118ffc6d72b77efad9661110fcc9ede464eb +--- + +{{APIRef("HTML DOM")}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`insertCell()`** 方法将一个新单元格（{{HtmlElement("td")}}）插入到表行（{{HtmlElement("tr")}}）中，然后返回新单元格的引用。 + +> [!NOTE] >`insertCell()` 将单元格直接插入行中，该单元格不需要像使用 {{domxref("Document.createElement()")}} 创建新的 `` 元素那样单独追加。 +> +> 你不能使用 `insertCell()` 来创建一个新的 `` 元素。 + +## 语法 + +```js-nolint +insertCell() +insertCell(index) +``` + +### 参数 + +- `index` {{optional_inline}} + - : 新单元格的单元格索引，如果 `index` 是 `-1` 或者等于单元格数，新单元格附加到行的最后一个单元格。如果省略 `index`，则默认值是 `-1`。 + +### 返回值 + +一个引用新单元格的 {{domxref("HTMLTableCellElement")}}。 + +### 异常 + +- `IndexSizeError` {{domxref("DOMException")}} + - : 如果 `index` 大于单元格数，则抛出此异常。 + +## 示例 + +此示例使用 `HTMLTableRowElement.insertCell()` 将新的单元格附加到行中。 + +### HTML + +```html + + + + + + + + + + + + + + + + +
C1C2C3C4C5
单元格 1单元格 2
+ + + +
第一行有 2 个单元格。
+``` + +```css hidden +table { + border-collapse: collapse; +} + +th, +td, +table { + border: 1px solid black; +} + +button { + margin: 1em 1em 1em 0; +} +``` + +### JavaScript + +```js +// 获取相关接口元素 +const bodySection = document.querySelectorAll("tbody")[0]; +const row = bodySection.rows[0]; // 选择主体部分的第一行 +const cells = row.cells; // 集合是动态的，因此总是最新的 +const cellNumberDisplay = document.querySelectorAll("output")[0]; + +const addButton = document.getElementById("add"); +const removeButton = document.getElementById("remove"); + +function updateCellNumber() { + cellNumberDisplay.textContent = cells.length; +} + +addButton.addEventListener("click", () => { + // 在第一行的默认添加单元格 + const newCell = row.insertCell(); + newCell.textContent = `单元格 ${cells.length}`; + + // 更新行数 + updateCellNumber(); +}); + +removeButton.addEventListener("click", () => { + // 从主体删除行 + row.deleteCell(-1); + + // 更新行数 + updateCellNumber(); +}); +``` + +### Result + +{{EmbedLiveSample("示例", "100%", 175)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableElement.insertRow()")}} +- 表示单元格的 HTML 元素：{{domxref("HTMLTableCellElement")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md b/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md index b174507e3e7840..625ef932ca0c4a 100644 --- a/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md @@ -1,21 +1,17 @@ --- title: HTMLTableRowElement.rowIndex slug: Web/API/HTMLTableRowElement/rowIndex +l10n: + sourceCommit: e5cb967d09849f77746f82d3526243fa956fbd8b --- {{APIRef("HTML DOM")}} -只读属性 **`HTMLTableRowElement.rowIndex`** 用于表示元素所在行相对于整个 {{HtmlElement("table")}} 的逻辑位置。 +{{domxref("HTMLTableRowElement")}} 接口的 **`rowIndex`** 只读属性表示元素所在行相对于整个 {{HtmlElement("table")}} 的逻辑位置。 即使 {{HtmlElement("thead")}}、{{HtmlElement("tbody")}} 和 {{HtmlElement("tfoot")}} 元素在 HTML 中乱序排列，浏览器也会以正确的顺序渲染表格。因此，行号的标记顺序为：从 `` 到 ``，再到 ``。 -## 语法 - -```js -var index = HTMLTableRowElement.rowIndex; -``` - -### 返回值 +## 值 返回该行的索引，如果该行不属于表的一部分，则返回 `-1`。 @@ -59,11 +55,11 @@ var index = HTMLTableRowElement.rowIndex; ### JavaScript ```js -let rows = document.querySelectorAll("tr"); +const rows = document.querySelectorAll("tr"); rows.forEach((row) => { - let z = document.createElement("td"); - z.textContent = `(row #${row.rowIndex})`; + const z = document.createElement("td"); + z.textContent = `(行 #${row.rowIndex})`; row.appendChild(z); }); ``` @@ -72,6 +68,14 @@ rows.forEach((row) => { {{EmbedLiveSample("示例")}} +## 规范 + +{{Specifications}} + ## 浏览器兼容性 {{Compat}} + +## 参见 + +- {{domxref("HTMLTableRowElement.sectionRowIndex")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/sectionrowindex/index.md b/files/zh-cn/web/api/htmltablerowelement/sectionrowindex/index.md new file mode 100644 index 00000000000000..796f88e65f880e --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/sectionrowindex/index.md @@ -0,0 +1,79 @@ +--- +title: HTMLTableRowElement：sectionRowIndex 属性 +slug: Web/API/HTMLTableRowElement/sectionRowIndex +l10n: + sourceCommit: 502544e192e1bc8d05453f88eb00e8bfde705c65 +--- + +{{ APIRef("HTML DOM") }} + +{{domxref("HTMLTableRowElement")}} 接口的 **`sectionRowIndex`** 只读属性表示当前部分（{{htmlelement("thead")}}、{{htmlelement("tbody")}} 和 {{htmlelement("tfoot")}}）的行位置。 + +## 值 + +返回该行的索引，如果该行不属于表的一部分，则返回 `-1`。 + +## 示例 + +本示例使用 JavaScript 标记表 `tbody` 中的所有行号。 + +### HTML + +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +
商品价格
香蕉$2
橘子$8
西冷牛排$20
总计$30
+``` + +### JavaScript + +```js +const rows = document.querySelectorAll("tbody tr"); + +rows.forEach((row) => { + const z = document.createElement("td"); + z.textContent = `(行 #${row.sectionRowIndex})`; + row.appendChild(z); +}); +``` + +### 结果 + +{{EmbedLiveSample("示例")}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("HTMLTableRowElement.rowIndex")}} diff --git a/files/zh-cn/web/api/htmltablerowelement/valign/index.md b/files/zh-cn/web/api/htmltablerowelement/valign/index.md new file mode 100644 index 00000000000000..6bd1146f199e09 --- /dev/null +++ b/files/zh-cn/web/api/htmltablerowelement/valign/index.md @@ -0,0 +1,45 @@ +--- +title: HTMLTableRowElement：vAlign 属性 +slug: Web/API/HTMLTableRowElement/vAlign +l10n: + sourceCommit: d16706e4e930c57161d473287374a9286c663147 +--- + +{{APIRef("HTML DOM")}}{{deprecated_header}} + +{{domxref("HTMLTableRowElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("tr")}} 列元素中垂直对齐文本的字符串。单个单元格可以覆盖它。 + +> [!NOTE] +> 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来垂直对齐分段单元格中的文本。 + +## 值 + +可能的值有：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。 + +- `top` + - : 将文本与单元格顶部对齐。使用 `vertical-align: top` 代替。 +- `center` + - : 将文本与单元格垂直居中对齐，`middle` 的同义词。使用 `vertical-align: middle` 代替。 +- `middle` + - : 将文本与单元格垂直居中对齐。使用 `vertical-align: middle` 代替。 +- `bottom` + - : 将文本与单元格底部对齐。使用 `vertical-align: bottom` 代替。 +- `baseline` + - : 与 `top` 相似，但使文本的基线贴近顶部，这样字符的任何部分都不会超出单元格。 + +## 示例 + +使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#vertical_alignment_in_a_table_cell)示例所示。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{cssxref("vertical-align")}} +- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables) From 53442e59c4c61d6d9e3e6ace36a388d23f7bb5a4 Mon Sep 17 00:00:00 2001 From: fuchunhui Date: Fri, 27 Sep 2024 15:48:42 +0800 Subject: [PATCH 2/9] update link --- files/zh-cn/web/api/htmltablerowelement/valign/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/valign/index.md b/files/zh-cn/web/api/htmltablerowelement/valign/index.md index 6bd1146f199e09..de683c68c2f32b 100644 --- a/files/zh-cn/web/api/htmltablerowelement/valign/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/valign/index.md @@ -29,7 +29,7 @@ l10n: ## 示例 -使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#vertical_alignment_in_a_table_cell)示例所示。 +使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#表格单元格中的垂直对齐)示例所示。 ## 规范 From d76de934be42a8095ed6979dc69413a285f443bf Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:21:57 +0800 Subject: [PATCH 3/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/align/index.md | 4 ++-- files/zh-cn/web/api/htmltablerowelement/cells/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/align/index.md b/files/zh-cn/web/api/htmltablerowelement/align/index.md index cecbb2cc56f8ef..ccc49bc83fb76e 100644 --- a/files/zh-cn/web/api/htmltablerowelement/align/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/align/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("HTML DOM")}}{{deprecated_header}} -{{domxref("HTMLTableRowElement")}} 接口的 **`align`** 属性是一个指示如何在 {{htmlelement("tr")}} 表格行中水平对齐文本的字符串。单个单元格可以覆盖它。 +{{domxref("HTMLTableRowElement")}} 接口的 **`align`** 属性是一个指示如何在表格列元素（{{htmlelement("tr")}}）中水平对齐文本的字符串。单个单元格可以覆盖它。 > [!NOTE] > 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。 @@ -25,7 +25,7 @@ l10n: - `justify` - : 将文本分散到单元格中。使用 `text-align: justify` 代替。 - `char` - - : 从不完全支持，将文本与指定字符对齐。在支持的情况下，使用 `text-align: ,` 其中字符串是单个字符。 + - : 从不完全支持，将文本与指定字符对齐。在支持的情况下，使用 `text-align: `，其中字符串是单个字符。 ## 示例 diff --git a/files/zh-cn/web/api/htmltablerowelement/cells/index.md b/files/zh-cn/web/api/htmltablerowelement/cells/index.md index eedc273edf3c3c..fff02ba41c3765 100644 --- a/files/zh-cn/web/api/htmltablerowelement/cells/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/cells/index.md @@ -64,7 +64,7 @@ button { ```js // 获取相关接口元素 const bodySection = document.querySelectorAll("tbody")[0]; -const row = bodySection.rows[0]; // 选择主体部分的第一行 +const row = bodySection.rows[0]; // 选择表格体部分的第一行 const cells = row.cells; // 集合是动态的，因此总是最新的 const cellNumberDisplay = document.querySelectorAll("output")[0]; From 7964b87be01c07bc48eebb8c73a21b808c747548 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:22:20 +0800 Subject: [PATCH 4/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/cells/index.md | 6 +++--- files/zh-cn/web/api/htmltablerowelement/deletecell/index.md | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/cells/index.md b/files/zh-cn/web/api/htmltablerowelement/cells/index.md index fff02ba41c3765..9d0fde96659dc0 100644 --- a/files/zh-cn/web/api/htmltablerowelement/cells/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/cells/index.md @@ -76,7 +76,7 @@ function updateCellNumber() { } addButton.addEventListener("click", () => { - // 在第一行的默认添加单元格 + // 在第一行的末尾添加单元格 const newCell = row.insertCell(); newCell.textContent = `单元格 ${cells.length}`; @@ -85,7 +85,7 @@ addButton.addEventListener("click", () => { }); removeButton.addEventListener("click", () => { - // 从主体删除行 + // 从表格体删除行 row.deleteCell(-1); // 更新行数 @@ -93,7 +93,7 @@ removeButton.addEventListener("click", () => { }); ``` -### Result +### 结果 {{EmbedLiveSample("示例", "100%", 175)}} diff --git a/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md index 87229f6842c918..8d5595fa133718 100644 --- a/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md @@ -101,7 +101,7 @@ addButton.addEventListener("click", () => { }); removeButton.addEventListener("click", () => { - // 从主体删除行 + // 从表格体删除行 row.deleteCell(-1); // 更新行数 @@ -109,7 +109,7 @@ removeButton.addEventListener("click", () => { }); ``` -### Result +### 结果 {{EmbedLiveSample("示例", "100%", 175)}} From b305dbce3d47c8c44a6fc34fa04d220faaffed2c Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:22:53 +0800 Subject: [PATCH 5/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/deletecell/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md index 8d5595fa133718..fe34c49b85a803 100644 --- a/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/deletecell/index.md @@ -80,7 +80,7 @@ button { ```js // 获取相关接口元素 const bodySection = document.querySelectorAll("tbody")[0]; -const row = bodySection.rows[0]; // 选择主体部分的第一行 +const row = bodySection.rows[0]; // 选择表格体部分的第一行 const cells = row.cells; // 集合是动态的，因此总是最新的 const cellNumberDisplay = document.querySelectorAll("output")[0]; @@ -92,7 +92,7 @@ function updateCellNumber() { } addButton.addEventListener("click", () => { - // 在第一行的默认添加单元格 + // 在第一行的末尾添加单元格 const newCell = row.insertCell(); newCell.textContent = `单元格 ${cells.length}`; From 3a60ec47e6776a0c4fc7f72247b987ed9c0d5587 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:23:07 +0800 Subject: [PATCH 6/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/index.md | 2 +- files/zh-cn/web/api/htmltablerowelement/insertcell/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/index.md b/files/zh-cn/web/api/htmltablerowelement/index.md index 224f756e0dbbe3..f4f4f7663b55a3 100644 --- a/files/zh-cn/web/api/htmltablerowelement/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/index.md @@ -34,7 +34,7 @@ _从其父接口 {{domxref("HTMLElement")}} 继承方法。_ ## 已弃用的属性 > [!WARNING] -> 此属性已弃用，不应再使用。它们被记录下来主要是为了帮助理解旧的代码来源。 +> 这些属性已被弃用，不应再使用。记录这些属性主要是为了帮助理解旧代码库。 - {{domxref("HTMLTableRowElement.align")}} {{deprecated_inline}} - : 一个反映 [`align`](/zh-CN/docs/Web/HTML/Element/tr#align) 属性的字符串枚举值。其指示元素内容相对于周围上下文的对齐方式，可能的值有：`"left"`、`"right"` 和 `"center"`。 diff --git a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md index d9550e977c0345..fca051ba800c3b 100644 --- a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md @@ -9,7 +9,7 @@ l10n: {{domxref("HTMLTableRowElement")}} 接口的 **`insertCell()`** 方法将一个新单元格（{{HtmlElement("td")}}）插入到表行（{{HtmlElement("tr")}}）中，然后返回新单元格的引用。 -> [!NOTE] >`insertCell()` 将单元格直接插入行中，该单元格不需要像使用 {{domxref("Document.createElement()")}} 创建新的 `` 元素那样单独追加。 +> **备注：** `insertCell()` 将单元格直接插入行中，如果使用 {{domxref("Document.createElement()")}} 创建新的 `` 元素，则不需要使用 {{domxref("Node.appendChild()")}} 单独追加单元格。 > > 你不能使用 `insertCell()` 来创建一个新的 `` 元素。 From 2f6be31845521af888a90d6f17aac52911ea0ee9 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:23:30 +0800 Subject: [PATCH 7/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/insertcell/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md index fca051ba800c3b..71b5b90cc94eee 100644 --- a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md @@ -85,7 +85,7 @@ button { ```js // 获取相关接口元素 const bodySection = document.querySelectorAll("tbody")[0]; -const row = bodySection.rows[0]; // 选择主体部分的第一行 +const row = bodySection.rows[0]; // 选择表格体部分的第一行 const cells = row.cells; // 集合是动态的，因此总是最新的 const cellNumberDisplay = document.querySelectorAll("output")[0]; @@ -97,7 +97,7 @@ function updateCellNumber() { } addButton.addEventListener("click", () => { - // 在第一行的默认添加单元格 + // 在第一行的末尾添加单元格 const newCell = row.insertCell(); newCell.textContent = `单元格 ${cells.length}`; From 77361eeaed884f6477c06e6d2c01d6493401063a Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:23:51 +0800 Subject: [PATCH 8/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/insertcell/index.md | 4 ++-- files/zh-cn/web/api/htmltablerowelement/valign/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md index 71b5b90cc94eee..ab1888fd5663b1 100644 --- a/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/insertcell/index.md @@ -106,7 +106,7 @@ addButton.addEventListener("click", () => { }); removeButton.addEventListener("click", () => { - // 从主体删除行 + // 从表格体删除行 row.deleteCell(-1); // 更新行数 @@ -114,7 +114,7 @@ removeButton.addEventListener("click", () => { }); ``` -### Result +### 结果 {{EmbedLiveSample("示例", "100%", 175)}} diff --git a/files/zh-cn/web/api/htmltablerowelement/valign/index.md b/files/zh-cn/web/api/htmltablerowelement/valign/index.md index de683c68c2f32b..7cb3e0da8d62f0 100644 --- a/files/zh-cn/web/api/htmltablerowelement/valign/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/valign/index.md @@ -7,7 +7,7 @@ l10n: {{APIRef("HTML DOM")}}{{deprecated_header}} -{{domxref("HTMLTableRowElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("tr")}} 列元素中垂直对齐文本的字符串。单个单元格可以覆盖它。 +{{domxref("HTMLTableRowElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格列元素（{{htmlelement("tr")}}）中垂直对齐文本的字符串。单个单元格可以覆盖它。 > [!NOTE] > 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来垂直对齐分段单元格中的文本。 From 899b9564283643c5b73b05d91db05131734a6805 Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Tue, 8 Oct 2024 19:24:08 +0800 Subject: [PATCH 9/9] Apply suggestions from code review Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/htmltablerowelement/valign/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/zh-cn/web/api/htmltablerowelement/valign/index.md b/files/zh-cn/web/api/htmltablerowelement/valign/index.md index 7cb3e0da8d62f0..7b1f9d4688c0b7 100644 --- a/files/zh-cn/web/api/htmltablerowelement/valign/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/valign/index.md @@ -10,7 +10,7 @@ l10n: {{domxref("HTMLTableRowElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格列元素（{{htmlelement("tr")}}）中垂直对齐文本的字符串。单个单元格可以覆盖它。 > [!NOTE] -> 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来垂直对齐分段单元格中的文本。 +> 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来逐行垂直对齐单元格的文本。 ## 值