JS判断是不是选中的是表格内当前选中的那一行
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS判断是不是选中的是表格内当前选中的那一行相关的知识，希望对你有一定的参考价值。
现有一表格，里面有很多行，当我点击第三行的时候，怎样判断当前选中的是表格内的第三行？
大致的JS代码怎样写？
可以给tr添加onclick事件，然后，通过tr的DOM对象的rowIndex属性获取当前点击的行的索引,从而去判断你点击了那一行。
javascript实现的话麻烦点,代码如下:
<html><head>
<script language="javascript">
function Window_Load()
var t = document.getElementById("table1");
var rows = t.getElementsByTagName("tr");
//给tr绑定click事件
for(var i in rows)
rows[i].onclick = rowClick;
function rowClick(e)
alert(this.rowIndex); //显示所点击的行的索引
</script>
</head>
<body onload="Window_Load();">
<table id="table1" border="1" cellpadding=0 cellspacing=0 >
<tr>
<td> t1</td>
<td> t1</td>
</tr> <tr>
<td> t1</td>
<td> t1</td>
</tr> <tr>
<td> t1</td>
<td> t1</td>
</tr>
</table>
</body>
</html>
用jQuery实现要简单一些，代码如下：
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function()
$("#table1 > tbody > tr").click(function()
alert(this.rowIndex);
);
);
</script>
</head>
<body >
<table id="table1" border="1" cellpadding=0 cellspacing=0 >
<tr>
<td> t1</td>
<td> t1</td>
</tr> <tr>
<td> t1</td>
<td> t1</td>
</tr> <tr>
<td> t1</td>
<td> t1</td>
</tr>
</table>
</body>
</html> 参考技术A <table id="myid">
<tr></tr>
<tr></tr>
</table>$('#myid>tr').click(function()
trs = $('#myid>tr');
// $(this)[0]是当前点击的dom元素
// 在返回的“数组”中查找当前元素的位置，第一个tr的位置是0
alert(trs.indexOf($(this)[0]));
);
这里使用了jQuery库实现。
window.onload=function()
document.getElementsByTagName("tr")[2].onmousedown=function(e)
alert("你点了第三个tr");
;
</script>
<body>
<table id="p" border="1px solid pink">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
</table>
</body>追问
能不能灵活一点？点第几行就提示第几行？
追答点第几行提示第几行，需要转换思路，必须将事件加载到每个tr上面，下面是代码。
<script type="text/javascript" >
function test(obj)
alert("你点了第"+(obj.rowIndex+1)+"个tr,tr内容为："+obj.innerHTML);
</script>
<body>
<table id="p" border="1px solid pink">
<tr onmousedown="test(this)"><td>1</td></tr>
<tr onmousedown="test(this)"><td>2</td></tr>
<tr onmousedown="test(this)"><td>3</td></tr>
<tr onmousedown="test(this)"><td>4</td></tr>
<tr onmousedown="test(this)"><td>5</td></tr>
<tr onmousedown="test(this)"><td>6</td></tr>
</table>
</body>
zhfto同学的javascript实现的很好，至少比我写的这个要好。强烈推荐。
elementUI判断自己选中的哪一行，this.$set在数组里面加上一个字段进行判断，联动实现
文章目录
表格里面的下拉框和进行联动产生的代码
<!-- //给行添加鼠标点击事件 -->
<el-table-column
prop="rulcon" label="规则条件" width="300">
<template slot-scope="scope">
<el-select clearable
v-model="dataList2[scope.$index].rulcon"
@change="changeByCustom(scope.row)"
style="width: 140px;"
>
<el-option label="重叠5%" value="1"></el-option>
<el-option label="不重叠" value="2"></el-option>
<el-option label="自定义比例" value="3" ></el-option>
</el-select>
<el-input
style="width: 160px;" v-if="scope.row.isShow" v-model="dataList2[scope.$index].ruldata">
<template
slot="append"
>%</template
>
</el-input>
</template>
</el-table-column>
1.this.$set(isshow,datalist,false),给数组里面的对象加上一个标识字段
this.$set(isshow,dataList,false); 设置这个数组里面的每个对象加上一个字段默认为false.
this.dataList2.forEach((item)=>
this.$set(item,'isShow',false)
if(item.rulcon==3)
item.isShow = true;
)
2.然后在里面加上了if条例用于判断一个联动是否要显示
3.然后用change事件传过来那个参数进行判断你自己选中的哪个一行
changeByCustom(row)
this.dataList2.forEach(item =>
// 判断一下选中的是哪一行
if(item.rulid == row.rulid)
// 联动框先设置为false
item.isShow = false;
// 如果选中的联动的值是3，不是置为true;
if(item.rulcon == 3)
item.isShow = true
);
console.info(row,"row----------------");
,
以上是关于JS判断是不是选中的是表格内当前选中的那一行的主要内容，如果未能解决你的问题，请参考以下文章
如何用jquery将勾中复选框的那一行的数据自动添加到同页面的另一个表格
ExtJS中grid单击一行时判断改行的复选框是不是选中，如果选中则单击之后取消选中状态，没有选中则让复选框
C# 怎样判断DEV GridView 中选中的哪一行是分组的标题行