diff options
Diffstat (limited to 'files/zh-cn')
-rw-r--r-- | files/zh-cn/web/api/htmltablerowelement/rowindex/index.md | 82 |
1 files changed, 46 insertions, 36 deletions
diff --git a/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md b/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md index ef548d318b..985e2e7074 100644 --- a/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md +++ b/files/zh-cn/web/api/htmltablerowelement/rowindex/index.md @@ -1,58 +1,68 @@ --- title: HTMLTableRowElement.rowIndex slug: Web/API/HTMLTableRowElement/rowIndex +tags: + - API + - HTML DOM + - NeedsSpecTable + - Property + - Reference translation_of: Web/API/HTMLTableRowElement/rowIndex --- -<div><font><font>{{APIRef("HTML DOM")}}</font></font></div> +{{APIRef("HTML DOM")}} -<p><font><font>的</font></font><strong><code>HTMLTableRowElement.rowIndex</code></strong><font><font>只读属性表示一个行相对于整个位置的{{HtmlElement("table")}}。</font></font></p> +只读属性 **`HTMLTableRowElement.rowIndex`** 用于表示元素所在行相对于整个 {{HtmlElement("table")}} 的逻辑位置。 -<p><font><font>即使{{HtmlElement("thead")}},{{HtmlElement("tbody")}}和{{HtmlElement("tfoot")}}}的元素在HTML中乱序显示,浏览器也会以正确的顺序。</font><font>因此,行数从</font></font><code><thead></code><font><font>到</font></font><code><tbody></code><font><font>,从</font></font><code><tbody></code><font><font>到</font></font><code><tfoot></code><font><font>。</font></font></p> +即使 {{HtmlElement("thead")}}、{{HtmlElement("tbody")}} 和 {{HtmlElement("tfoot")}}} 元素在 HTML 中乱序排列,浏览器也会以正确的顺序渲染表格。因此,行号的标记顺序为:从 `<thead>` 到 `<tbody>`,再到 `<tfoot>`。 -<h2 id="句法"><font><font>句法</font></font></h2> +## 语法 -<pre class="syntaxbox notranslate"><font><font>var </font></font><em><font><font>index</font></font></em><font><font> = </font></font><em><font><font>HTMLTableRowElement</font></font></em><font><font> .rowIndex</font></font></pre> +```js +var index = HTMLTableRowElement.rowIndex +``` -<h3 id="值"><font><font>值</font></font></h3> +### 返回值 -<p><font><font>返回该行的索引,或者</font></font><code>-1</code><font><font>如果该行不属于表的一部分,则</font><font>返回该索引</font><font>。</font></font></p> +返回该行的索引,如果该行不属于表的一部分,则返回 `-1`。 -<h2 id="例"><font><font>例</font></font></h2> +## 示例 -<p><font><font>本示例使用JavaScript标记表中的所有行号。</font></font></p> +本示例使用 JavaScript 标记表中的所有行号。 -<h3 id="的HTML"><font><font>的HTML</font></font></h3> +### HTML -<pre class="brush: html notranslate"><font><font><表格></font></font><font><font> - <thead></font></font><font><font> - <tr> <th>商品</ th> <th>价格</ th> </ tr></font></font><font><font> - </ thead></font></font><font><font> - <身体></font></font><font><font> - <tr> <td>香蕉</ td> <td> $ 2 </ td> </ tr></font></font><font><font> - <tr> <td>橙色</ td> <td> $ 8 </ td> </ tr></font></font><font><font> - <tr> <td>顶级沙朗</ td> <td> $ 20 </ td> </ tr></font></font><font><font> - </ tbody></font></font><font><font> - <脚></font></font><font><font> - <tr> <td>总计</ td> <td> $ 30 </ td> </ tr></font></font><font><font> - </ tfoot></font></font><font><font> -</ table></font></font></pre> +```html +<table> + <thead> + <tr><th>商品</th> <th>价格</th></tr> + </thead> + <tbody> + <tr><td>香蕉</td> <td>$2</td></tr> + <tr><td>橘子</td> <td>$8</td></tr> + <tr><td>西冷牛排</td> <td>$20</td></tr> + </tbody> + <tfoot> + <tr><td>总计</td> <td>$30</td></tr> + </tfoot> +</table> +``` -<h3 id="的JavaScript"><font><font>的JavaScript</font></font></h3> +### JavaScript -<pre class="brush: js notranslate"><font><font>让行= document.querySelectorAll('tr');</font></font> -<font><font> -rows.forEach((row)=> {</font></font><font><font> - 让z = document.createElement(“ td”);</font></font><font><font> - z.textContent =`(row#$ {row.rowIndex})`;</font></font><font><font> - row.appendChild(z);</font></font><font><font> -});</font></font></pre> +```js +let rows = document.querySelectorAll('tr'); -<h3 id="结果"><font><font>结果</font></font></h3> +rows.forEach((row) => { + let z = document.createElement("td"); + z.textContent = `(row #${row.rowIndex})`; + row.appendChild(z); +}); +``` -<p><font><font>{{EmbedLiveSample("Example")}}</font></font></p> +### 结果 -<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2> +{{EmbedLiveSample("Example")}} +## 浏览器兼容性 - -<p><font><font>{{Compat("api.HTMLTableRowElement.rowIndex")}}</font></font></p> +{{Compat}} |