JS判断是否选中的是表格内当前选中的那一行
现有一表格，里面有很多行，当我点击第三行的时候，怎样判断当前选中的是表格内的第三行？大致的JS代码怎样写？...
现有一表格，里面有很多行，当我点击第三行的时候，怎样判断当前选中的是表格内的第三行？
大致的JS代码怎样写？ 展开
大致的JS代码怎样写？ 展开
3个回答
展开全部
可以给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>
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<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库实现。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript" >
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>
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实现的很好，至少比我写的这个要好。强烈推荐。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
