点击table中的某一个td,获得这个tr的所有数据
功能: 点击table中的某一个td,获得这个tr的所有数据
效果图
<html>
<head>
<script>
function getData2(element){
document.getElementById("name").value=element.children[0].innerHTML;
document.getElementById("xuehao").value=element.children[1].innerHTML;
}
</script>
</head>
<body>
<table border="1">
<tr >
<td>学号</td>
<td>姓名</td>
</tr>
<tr onclick=getData2(this) >
<td>AAAAAAAAAAA</td>
<td>张三 </td>
</tr>
<tr onclick=getData2(this) >
<td>BBBBBBBBBB</td>
<td>李四</td>
</tr>
</table>
</br>
</br>
<input type="text" id="name" name="name" />
<input type="text" id="xuehao" name="xuehao" />
</body>
</html>
当然还有另外一种方式,我直接在javascript里面给所有的tr加上onclick属性#
<html>
<head>
<script>
function getData(){
document.getElementById("name").value=this.children[0].innerHTML;
document.getElementById("xuehao").value=this.children[1].innerHTML;
}
</script>
</head>
<body>
<table border="1">
<tr >
<td>学号</td>
<td>姓名</td>
</tr>
<tr >
<td>AAAAAAAAAAA</td>
<td>张三 </td>
</tr>
<tr >
<td>BBBBBBBBBB</td>
<td>李四</td>
</tr>
</table>
</br>
</br>
<input type="text" id="name" name="name" />
<input type="text" id="xuehao" name="xuehao" />
<script type="text/javascript">
var tds=document.getElementsByTagName("tr");
var obj=null;
for(var i=1,len=tds.length;i<len;i++){
obj=tds[i];
obj.onclick=getData; //这里没有括号
}
</script>
</body>
</html>
对于这两种方法,我不懂的是为什么一个getData()没有参数,getData2(element)却有参数
点击table中的某一个td,获得这个tr的所有数据的更多相关文章
- table 中 文字长度大于td宽度，导致文字换行 解决方案
1.TD不换行 nowrap属性 表格table的td单元格中,文字长了往往会撑开单元格,但是如果table都不够宽了,就换行了好像(不要较真其他情况,我只说会换行的情况).换行后的表格显得乱糟糟,不 ...
- vb.net 使用 Regex Replace 正则 替换 Html字串的table中tbody第一个tr下的td为th
本次示例效果如下: TextBox1中输入如下字符串: 12<table><tbody><tr><td>1<br/>11</td> ...
- table中绝对定位元素相对td定位失效解决方案
开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...
- js遍历table中的每一个元素
function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElemen ...
- JS实现点击table中任意元素选中
上项目开发,忙的焦头烂额,博客也没咋更新了. 昨天老师提了个需求,简单的小例子,选择tr中任一行选中tr,觉得很有意思,记录一下: 上代码 <!DOCTYPE html> <html ...
- javascript做的一个根据table中某个td的值为日期时的倒计时
JavaScript代码: <script> window.onload = window.onload = function () { getTdValue(); } //根据传过来的天 ...
- js穿梭框；将两个table中的数据选中移动
将table中选中的数据移动到右边: 点击一行中的任意一个位置,使其选中: 注:attr()和prop()都是jquery的方法: .attr() : 获取匹配的元素集合中的第一个元素的属性的值 或 ...
- js的传值，table中tr的遍历，js中动态创建数组
1.这里关键是对页面中的传值,其次是动态的创建一个数组,用来存值 $(val).css("background-color", "rgb(251, 248, 233)&q ...
- table中tr或者td的点击事件
直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...
随机推荐
- 20160212.CCPP体系详解(0022天)
程序片段(01):01.二维数组.c 内容概要:二维数组 #include <stdio.h> #include <stdlib.h> //01.关于栈内存开辟数组: // 诀 ...
- intel-hadoop/HiBench流程分析----以贝叶斯算法为例
1.HiBench算法简介 Hibench 包含9个典型的hadoop负载(micro benchmarks,hdfs benchmarks,web search bench marks,machin ...
- Unity插件 - MeshEditor（八）模型镜像特效
将静态模型(带MeshFilter)按指定轴向.指定距离克隆一个镜像物体出来,思路很简单,将模型的顶点坐标按指定轴取反,并累加上设定的距离值,然后就完毕了!不过,因为镜像体的顶点镜像于之前模型的顶点, ...
- ROS新闻 Towards ROS-native drones 无人机支持方案
PX4/Firmware:https://github.com/PX4/Firmware PXFmini An open autopilot daughter-board for the Raspbe ...
- Windows编译ejabberd
Windows编译ejabberd(金庆的专栏)安装 erlang OTP. 添加路径到 PATH, 使 erl 可以运行.git clone ejabberd安装 rebar:git clone g ...
- Redis集群教程(Redis cluster tutorial)
本博文翻译自Redis官网:http://redis.io/topics/cluster-tutorial 本文档以温和的方式介绍Redis集群,不使用复杂的方式来理解分布式系统的概念. ...
- 子库存-OU-库存组织-关系
SELECT hou.organization_id ou_org_id, --org_id hou.name ou_name, --ou名称 ood.organization_id org_org_ ...
- 高通msm8994性能及温度监测脚本
[plain] view plain copystartTime=$(date +%Y-%m-%d-%H-%M-%S) pathName="/data/cpu_logs" fi ...
- Android中FrameAnimation动画的使用
Frame Animation 表示帧动画,是顺序播放事先做好的图像,跟电影类似,Android SDK提供了另外一个类AnimationDrawable来定义使用Frame Animation. 下 ...
- 编译GDAL支持ArcObjects
编译GDAL支持ArcObjects. 首先修改nmake.opt文件中对应的ArcObjects,修改后的如下所示: #uncomment to use ArcObjects ARCOBJECTS_ ...