點選td獲取tr的所有值
阿新 • • 發佈：2021-01-09
廢話不說，複製貼上看效果。（可在任意地方建立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>