點擊td獲取tr的所有值


廢話不說,復制粘貼看效果。(可在任意地方創建html 文件)

  注:因為里面引入的 bootstrap.min.cssjquery-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' /></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' /></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' /></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>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM