js双击table中的行得到行内信息的方法

发布时间:2019-11-13编辑:脚本学堂
本文介绍用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.jb200.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中的行,看看效果如何呢?!