js双击table中的行得到行内信息的方法
发布时间：2014-11-13 编辑：jiaochengji.com
本文介绍用js实现双击table中的行，获取得到行内信息的方法，这种体验相当不错。有需要的朋友，可以参考下。
要实现这个功能，需要做到以下三点：
1、要给返回值的单元格设置id属性(即指定对象名，以便JS调用)
2、定义一个函数，用于单击里调用这个函数。
3、在<tr>标签中指定单击事件onclick调用2定义的函数。
代码如下：
复制代码 代码示例:
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js双击table中的行得到行内信息-www.jiaochengji.com</title>
<script language="javascript">
function clickTR(n)
{
var a=document.getElementById("td"+n+"1").innerText;
var b=document.getElementById("td"+n+"2").innerText;
var c=document.getElementById("td"+n+"3").innerText;
var d=document.getElementById("td"+n+"4").innerText;
alert("编号："+a+"\n姓名："+b+"\n性别："+c+"\n年龄："+d);
}
</script>
</head>
<body>
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<tr align="center">
<td width="25%">编号</td>
<td width="25%">姓名</td>
<td width="25%">性别</td>
<td width="25%">年龄</td>
</tr>
<tr align="center" onclick="clickTR(1);">
<td id="td11">1</td>
<td id="td12">王中央</td>
<td id="td13">男</td>
<td id="td14">23</td>
</tr>
<tr align="center" onclick="clickTR(2);">
<td id="td21">2</td>
<td id="td22">赵四娣</td>
<td id="td23">女</td>
<td id="td24">32</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js双击table中的行得到行内信息-www.jiaochengji.com</title>
<script language="javascript">
function clickTR(n)
{
var a=document.getElementById("td"+n+"1").innerText;
var b=document.getElementById("td"+n+"2").innerText;
var c=document.getElementById("td"+n+"3").innerText;
var d=document.getElementById("td"+n+"4").innerText;
alert("编号："+a+"\n姓名："+b+"\n性别："+c+"\n年龄："+d);
}
</script>
</head>
<body>
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<tr align="center">
<td width="25%">编号</td>
<td width="25%">姓名</td>
<td width="25%">性别</td>
<td width="25%">年龄</td>
</tr>
<tr align="center" onclick="clickTR(1);">
<td id="td11">1</td>
<td id="td12">王中央</td>
<td id="td13">男</td>
<td id="td14">23</td>
</tr>
<tr align="center" onclick="clickTR(2);">
<td id="td21">2</td>
<td id="td22">赵四娣</td>
<td id="td23">女</td>
<td id="td24">32</td>
</tr>
</table>
</body>
</html>
把以上代码保存为test.html，然后双击浏览，点点里面的table中的行，看看效果如何呢？！
您可能感兴趣的文章：
js双击table中的行得到行内信息的方法
使用UltraWinGrid时双击的处理
php单引号和双引号用法
js鼠标单击与双击事件共存
电脑提示Invalid partition table 双硬盘开机提示
js 未结束的字符串常量解决方法
asp.net 服务器应用程序不可用的解决办法
电脑输入法切换不了怎么办
windows环境Mysql自动备份与恢复的方法
如何删除Windows.old文件夹?删除windows.old文件方法
[关闭]