廢話不說,復制粘貼看效果。(可在任意地方創建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' /></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>