点击td获取tr的所有值

废话不说,复制粘贴看效果。(可在任意地方创建html 文件)

  注:因为里面引入的 bootstrap.min.css和jquery-2.1.4.min.js文件是在线的,需要连接网格使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<body>
<button type="button" class="btn btn-warning" id="upd">修改</button>
<table class="table table-hover" id="dataTable1">

<thead>
<tr>
<th></th>
<th>ID</th>
<th>用户名</th>
<th>用户密码</th>
</tr>
</thead>
<tbody id="table">

<tr class='ss'>
<td><input type='checkbox' name='checkItem' class='btnSelect' value='1' data-id='1' /></td>
<td name='uid'>1</td>
<td name='username' >张三</td>
<td name='password'>123</td>
</tr>
<tr class='ss'>
<td><input type='checkbox' name='checkItem' class='btnSelect' value='1' data-id='1' /></td>
<td name='uid'>2</td>
<td name='username'>李四</td>
<td name='password'>321</td>
</tr>
<tr class='ss'>
<td><input type='checkbox' name='checkItem' class='btnSelect' value='1' data-id='1' /></td>
<td name='uid'>3</td>
<td name='username'>王五</td>
<td name='password'>213</td>
</tr>
</tbody>
</table>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script>

$("#upd").click(function () {
var uid;
var username;
var password;
var len = $("input:checkbox:checked").length;
var check = $("input[name='checkItem']:checked");
check.each(function () {
var row = $(this).parent("td").parent("tr");
uid = row.find("[name='uid']").html();
username = row.find("[name='username']").html();
password = row.find("[name='password']").html();
});
if(len===1){
alert(uid+" "+username+" "+password);
}else{
alert("请选择一条数据")
}
});
</script>
</body>
</html>

  

 

上一篇:学习笔记——HTML标签(下)


下一篇:在vue中实现两个输入框内容的同步及转换