网页table如何获取每行的索引
2019-07-03 本文已影响0人
Jerry_ojk
方式1:rowIndex
rowIndex
从 0 开始
function onClick() {
//获取到tr节点的索引(我这里需要向上获取2次父节
alert(this.parentNode.parentNode.rowIndex);点)
}
方式2:sectionRowIndex
sectionRowIndex
从 1 开始
function onDeleteClick() {
alert(this.parentNode.parentNode.sectionRowIndex)
}
方式3:selectedIndex
这种方式稍微麻烦,selectedIndex
只起到一个保存数据的作用,但是好处是 不用寻找父节点,selectedIndex
可以设置为任意我们需要的数据(比如做分页时可以存入分页之后的索引),不仅仅可以用来表示索引。
let bu = document.createElement("button");//创建button
bu.selectedIndex = index;//设置索引
bu.onclick = onClick;
//省略把这个button插入到tr中的代码
function onClick() {
alert(this.selectedIndex);//获取到索引
}
方式4:数据绑定
这种方式与方式3有相似之处,但是可以绑定多个字符串形式的数据,在网页源代码里可以看到如下H5代码:
<button data-index="1" data-id="3">点我</button>
这种方式是通过增加data-xxx形式的标签来保存数据的,如果不介意在网页源代码里可以看到数据可以用这种方法。
let bu = document.createElement("button");//创建button
bu.setAttribute("data-index", i);//设置索引
bu.setAttribute("data-id", 3);//设置id
bu.onclick = onClick;
...
//省略把这个button插入到tr中的代码
function onClick() {
let index = this.getAttribute("data-index");//获取到索引
let id = this.getAttribute("data-id");//获取到id
alert(index);
}