[zh-cn]: create docs for HTMLTableRowElement

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: <string>`，其中字符串是单个字符。
+
+## 示例
+
+使用 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)

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")}}

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
+<table>
+  <thead>
+    <tr>
+      <th>C1</th>
+      <th>C2</th>
+      <th>C3</th>
+      <th>C4</th>
+      <th>C5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>单元格 1</td>
+      <td>单元格 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<button id="add">添加单元格</button>
+<button id="remove">移除最后的单元格</button>
+<div>第一行有 <output>2</output> 个单元格。</div>
+```
+
+```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();
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 175)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableRowElement.insertCell()")}}
+- {{domxref("HTMLTableRowElement.deleteCell()")}}

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")}}

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")}}

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
+<table>
+  <thead>
+    <tr>
+      <th>C1</th>
+      <th>C2</th>
+      <th>C3</th>
+      <th>C4</th>
+      <th>C5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>单元格 1</td>
+      <td>单元格 2</td>
+    </tr>
+  </tbody>
+</table>
+
+<button id="add">添加单元格</button>
+<button id="remove">移除最后的单元格</button>
+<div>第一行有 <output>2</output> 个单元格。</div>
+```
+
+```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();
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 175)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableElement.insertRow()")}}
+- 表示单元格的 HTML 元素：{{domxref("HTMLTableCellElement")}}