javascript中如何表格返回该行的索引

我就直接写获取tr了

var oTrs = documentgetElementsByTagName("tr");

for(var i=0,i<oTrslength;i++)

{

oTrs[i]index = i; //这里把每个tr的index属性里存入对应的i，以便后边取用

oTrs[i]onclick = function()

{

alert(thisindex); //你点击每TR就会d出他的索引值，是通过对应TR的index属性得到的

}

}

补充：

其实还有很多方法，比如闭包、new Function()等等。主要是看你习惯用哪个。

项目开发种有这么一个需求，需要进行表格嵌套进行数据 *** 作，翻阅文档在antd上倒是有这样的例子，但是二级表格数据信息 *** 作都是一模一样的，文档也没有说明如何在 *** 作二级表格的时候如何获取到当前的一级表格行。

在 *** 作二级表格的时候，肯定是需要知道当前一级表格的行下标索引，不然根本不知道 *** 作的是那一行

经过一下午的折腾，总算是实现了，下面写了个简单的demo例子。不管业务怎么复杂，但核心点无非就是如何获取到当前的行下标，以及上一级的下标

例子：

复制上面的例子，跑一下就可以

1在el-form标签中定义:rules="rules";ref="reference"

2在el-form-item定义prop="name";

3在选项data中定义rules校验规则;

4在提交方法中检查用户行为

表单：

 <el-form

        :model="ruleForm"

        :rules="rules"  //规则rules

        ref="ruleForm"

      >

组件：

     <CreateModal

            ref="CM"

            :url="thisurl"

            :rules="formRules" //规则formRules

            :form-items="thisformItems"

            @submitData="submitData"

          />

>

最近项目中频繁使用 table 功能，因为 UI 框架使用的又是 Element UI，于是总结下在 Element 下 el-table 组件使用技巧。

table 组件提供了 row-style 属性，说明：行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style 。

于是我们可以在 method 中写一个 setRowStyle 方法，通过行索引和背景色数组去匹配颜色值用于单元格背景色。

而触发设置我们可以在最后一栏添加名称为“ *** 作”的下拉菜单按钮，在菜单里增加行背景色菜单，鼠标移上去，在左侧出现的 el-popover 组件中引入 color-picker 组件用于颜色选择。

Table 组件下面有 span-method 属性，说明：合并行或列的计算方法，传入的参数有 row , column , rowIndex , columnIndex 。

然后我们实现 objectSpanMethod 方法，注意这里的 afterSpanArray 为一个包含第一列和第二列 Prop 值的为属性值的对象，然后这两个属性所对应的 value 值分别为合并行值的数组。

Table 组件提供了 show-summary 属性，说明：是否在表尾显示合计行，它的值是 Boolean 类型的，如果设置为 true ，则表格底部为会增加“合计”的一行，它只会统计单元格值是数字的列。

另外，配合这个属性，还有一个 summary-method 的属性，说明：自定义的合计计算方法，回调函数的参数 columns 和 data （表格显示数据） 组成的对象。

这样我们在此封装一个满足自己规则的统计方法，如果单元格里已经包含了产品线的统计行，那么最后总的人力统计就要减去它。

当表格展示数据有限，又不想单独设置详情页面显示，可以使用行的展开项，以文本的格式显示。

需要用到两个属性 row-key 和 expand-row-keys （通过该属性设置 Table 目前的展开行，其值为展开行的 keys 数组）

展开行的内容需要增加 type 属性为 expand 的 el-table-column 标签

这样默认触发展开是点击单元格中的向右箭头。可以如果我们想点击行的任何地方即可展开，该怎么办？也是有办法的，table 组件提供了 row-click 方法

它的回调的参数是行数据，我们在此维护了一个数组存储当前展开行的 id 值。

这个陷阱也是有办法弥补的，从文档中我们看到 Table 提供了另外一个 expand-change 方法，用于监听行展开收起事件，这样不管你从哪点击行展开，都可以知道。

该函数回调参数有两个，一个是 row 和 expandedRows

这样我们在该方法中执行一遍以上点击事件即可。

以上是我从项目中总结的常用的一些方式。Table 组件提供了丰富的属性和方法，相信还可以结合使用实现更多有用的功能。

以上就是关于javascript中如何表格返回该行的索引全部的内容，包括:javascript中如何表格返回该行的索引、antd 表格嵌套获取下标索引、vue：ElementUI表格控件数据校验等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！