files/zh-cn/web/api/htmltablerowelement/rowindex/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

---
title: HTMLTableRowElement.rowIndex
slug: Web/API/HTMLTableRowElement/rowIndex
translation_of: Web/API/HTMLTableRowElement/rowIndex
---
<div><font><font>{{APIRef("HTML DOM")}}</font></font></div>

<p><font><font>的</font></font><strong><code>HTMLTableRowElement.rowIndex</code></strong><font><font>只读属性表示一个行相对于整个位置的{{HtmlElement("table")}。</font></font></p>

<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>

<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>

<h3 id="值"><font><font>值</font></font></h3>

<p><font><font>返回该行的索引，或者</font></font><code>-1</code><font><font>如果该行不属于表的一部分，则</font><font>返回该索引</font><font>。</font></font></p>

<h2 id="例"><font><font>例</font></font></h2>

<p><font><font>本示例使用JavaScript标记表中的所有行号。</font></font></p>

<h3 id="的HTML"><font><font>的HTML</font></font></h3>

<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>

<h3 id="的JavaScript"><font><font>的JavaScript</font></font></h3>

<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>

<h3 id="结果"><font><font>结果</font></font></h3>

<p><font><font>{{EmbedLiveSample("Example")}}</font></font></p>

<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>

<div class="hidden"><font><font>此页面上的兼容性表是根据结构化数据生成的。</font><font>如果您想提供数据，请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们发送请求请求。</font></font></div>

<p><font><font>{{Compat("api.HTMLTableRowElement.rowIndex")}}</font></font></p>