<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="./jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
function showName(obj){
var thisObj = $(obj) //js对象转jquery对象
var span = thisObj.parent().prev().prev().prev().children('span');
span.toggle();
var p = thisObj.parent().prev().prev().prev().children('p');
p.toggle();
// console.log(td);
}
</script>
<body style="width:100% margin:0 auto">
<table border="1" style="margin:0 auto">
<tr>
<th width="100">姓名</th>
<th width="100">性别</th>
<th width="100">年龄</th>
<th width="150">操作</th>
</tr>
<tr>
<td><span style="display:none">隐身</span><p>Lisen</p></td>
<td>男</td>
<td>18</td>
<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
</tr>
<tr>
<td><span style="display:none">隐身</span><p>Joker</p></td>
<td>男</td>
<td>18</td>
<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
</tr>
<tr>
<td><span style="display:none">隐身</span><p>Mike</p></td>
<td>男</td>
<td>18</td>
<td><a href="javascript:;" onclick="showName(this)">隐藏/显示姓名</a></td>
</tr>
</table>
</body>
</html>
onclick(this)，传值this可以通过console.log()打印，可以看到打印的结果是a标签本身，可以得到a标签本身的属性，如果想通过this传值得到其他标签，则需要将js对象，转化为jquery对象
var thisObj = $(obj) //js对象转jquery对象，这句是必要的
否则不能得到父节点的相关内容，当然，如果只要得到当前标签的内容和属性，就不需要上面的代码
运行效果：
点击第一个“隐藏/显示姓名”
再次点击会显示
更多推荐
JQuery onclick()事件
发布评论