correct the translation for rowElement.rowIndex

Also fix the live sample.

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>&lt;thead&gt;</code><font><font>到</font></font><code>&lt;tbody&gt;</code><font><font>，从</font></font><code>&lt;tbody&gt;</code><font><font>到</font></font><code>&lt;tfoot&gt;</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>&lt;表格&gt;</font></font><font><font>
-  &lt;thead&gt;</font></font><font><font>
-    &lt;tr&gt; &lt;th&gt;商品&lt;/ th&gt; &lt;th&gt;价格&lt;/ th&gt; &lt;/ tr&gt;</font></font><font><font>
-  &lt;/ thead&gt;</font></font><font><font>
-  &lt;身体&gt;</font></font><font><font>
-    &lt;tr&gt; &lt;td&gt;香蕉&lt;/ td&gt; &lt;td&gt; $ 2 &lt;/ td&gt; &lt;/ tr&gt;</font></font><font><font>
-    &lt;tr&gt; &lt;td&gt;橙色&lt;/ td&gt; &lt;td&gt; $ 8 &lt;/ td&gt; &lt;/ tr&gt;</font></font><font><font>
-    &lt;tr&gt; &lt;td&gt;顶级沙朗&lt;/ td&gt; &lt;td&gt; $ 20 &lt;/ td&gt; &lt;/ tr&gt;</font></font><font><font>
-  &lt;/ tbody&gt;</font></font><font><font>
-  &lt;脚&gt;</font></font><font><font>
-    &lt;tr&gt; &lt;td&gt;总计&lt;/ td&gt; &lt;td&gt; $ 30 &lt;/ td&gt; &lt;/ tr&gt;</font></font><font><font>
-  &lt;/ tfoot&gt;</font></font><font><font>
-&lt;/ table&gt;</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）=&gt; {</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}}