HTML中js怎么用某个td标签的onclick()来获取另一个td标签中的文本值 50
如题,<table><tr><td>111</td><tdonlick=fun()></td></tr><tr><td>222</td><tdonlick=fun()><...
如题,
<table>
<tr>
<td>111</td>
<td onlick=fun()></td>
</tr>
<tr>
<td>222</td>
<td onlick=fun()></td>
</tr>
...
</table>
我怎么用onclick得到第一个td中的文本值,111或222呢。直接用getElementById不行吧。因为每个td标签的id都是一样的。而又不能将他们都变为不一样的id值,因为项太多了。 展开
<table>
<tr>
<td>111</td>
<td onlick=fun()></td>
</tr>
<tr>
<td>222</td>
<td onlick=fun()></td>
</tr>
...
</table>
我怎么用onclick得到第一个td中的文本值,111或222呢。直接用getElementById不行吧。因为每个td标签的id都是一样的。而又不能将他们都变为不一样的id值,因为项太多了。 展开
4个回答
展开全部
获取点击元素的第一个兄弟元素的文本,可以有如下几种方法
先获取父元素,在获取第一个子元素
直接获取第一个兄弟元素
所有的方法用jQuery 非常好做, 原生js 代码非常繁琐。
最好不要在html中写js,样式,结构,行为要分离
下面我给出了原生js实现功能的一些代码。你试试jquery会非常简单的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>111</td>
<td class="btn">点我</td>
</tr>
<tr>
<td>222</td>
<td class="btn">点我</td>
</tr>
</table>
</body>
</html><script>
var btn = document.querySelectorAll(".btn");
for(var i=0,l=btn.length;i<l;i++){
btn[i].onclick = function () {
var parent = this.parentNode;
var firstNode = parent.childNodes;
for(var i=0,l=firstNode.length;i<l;i++){
if(firstNode[i].nodeType === Node.ELEMENT_NODE){
alert(firstNode[i].innerText);
return false;
}
}
}
}
</script>
展开全部
<tr>
<td>111</td>
<td onlick=fun(this)></td>
</tr>
function fun(e){
e.previousElementSibling.innerHTML
}
亲测可以
this获取当前点击的是哪个元素 previousElementSibling获取上一个兄弟元素
点击谁就获取谁的上一个兄弟元素 innerHTML为内容 解决请采纳欢迎追问 纯手码
<td>111</td>
<td onlick=fun(this)></td>
</tr>
function fun(e){
e.previousElementSibling.innerHTML
}
亲测可以
this获取当前点击的是哪个元素 previousElementSibling获取上一个兄弟元素
点击谁就获取谁的上一个兄弟元素 innerHTML为内容 解决请采纳欢迎追问 纯手码
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
很多办法的,onclick的时候执行this.previousSbiling就可以找到节点,然后获取文本就行,previousSbiling的意思为找到当前节点的上一个兄弟元素。
“直接用getElementById不行吧。因为每个td标签的id都是一样的“。你这句话有问题,ID是唯一的,你多个ID也只是第一个起作用。
另外你可以给你要获取的节点加个class,点击的时候通过获取class来拿到文本。
“直接用getElementById不行吧。因为每个td标签的id都是一样的“。你这句话有问题,ID是唯一的,你多个ID也只是第一个起作用。
另外你可以给你要获取的节点加个class,点击的时候通过获取class来拿到文本。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
你好,这是我改的的代码,你试下,我用了jQuery插件:
<table>
<tr>
<td>111</td>
<td onclick="fun(this)">点击(必须有字,不然不显示)</td>
</tr>
<tr>
<td>222</td>
<td onclick="fun(this)">点击(必须有字,不然不显示)</td>
</tr>
</table>
<script src="jquery-1.7.2.min.js"></script>
<script>
function fun(obj)
{
alert($(obj).prev().text());
}
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询