HTMLTableRowElement.rowIndex - Web API 接口参考 编辑

{{APIRef(“ HTML DOM”)}}

HTMLTableRowElement.rowIndex只读属性表示一个行相对于整个位置{{的HtmlElement(“表”)}}。

即使{{HtmlElement(“ thead”)}},{{HtmlElement(“ tbody”)}}和{{HtmlElement(“ tfoot”)}}}的元素在HTML中乱序显示,浏览器也会以正确的顺序。因此,行数从<thead><tbody>,从<tbody><tfoot>

句法

var index = HTMLTableRowElement .rowIndex

返回该行的索引,或者-1如果该行不属于表的一部分,则返回该索引

本示例使用JavaScript标记表中的所有行号。

的HTML

<表格>
  <thead>
    <tr> <th>商品</ th> <th>价格</ th> </ tr>
  </ thead>
  <身体>
    <tr> <td>香蕉</ td> <td> $ 2 </ td> </ tr>
    <tr> <td>橙色</ td> <td> $ 8 </ td> </ tr>
    <tr> <td>顶级沙朗</ td> <td> $ 20 </ td> </ tr>
  </ tbody>
  <脚>
    <tr> <td>总计</ td> <td> $ 30 </ td> </ tr>
  </ tfoot>
</ table>

的JavaScript

让行= document.querySelectorAll('tr');

rows.forEach((row)=> {
  让z = document.createElement(“ td”);
  z.textContent =`(row#$ {row.rowIndex})`;
  row.appendChild(z);
});

结果

{{EmbedLiveSample(“ Example”)}}

浏览器兼容性

此页面上的兼容性表是根据结构化数据生成的。如果您想提供数据,请查看https://github.com/mdn/browser-compat-data并向我们​​发送请求请求。

{{Compat(“ api.HTMLTableRowElement.rowIndex”)}}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:102 次

字数:3218

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文