用兩種方法獲取和修改table表中數據,代碼如下:
第一種方案的思想是,根據table中的當前 tr 的位置來定位,當前修改的tr 。
第二種方案的思想是,給table中的每個 tr 做一個標記,根據此標記來修改當前的tr 。
html代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table</title>
<script src="jquery-1.4.4.min.js"></script>
</head>
<body>
<table id="table">
<thead>
<tr><th>id</th><th>name</th><th>sex</th><th>操作</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小敏</td>
<td>30</td>
<td><a href="javascript:;" data="a">修改1</a></td>
</tr>
<tr>
<td>2</td>
<td>小張</td>
<td>25</td>
<td><a href="javascript:;" data="b">修改2</a></td>
</tr>
<tr>
<td>3</td>
<td>小秀</td>
<td>10</td>
<td><a href="javascript:;" data="c">修改3</a></td>
</tr>
</tbody>
</table>
<div id="update">
<form name="form" data="1">
<input type="text" name="id" />
<input type="text" name="name" />
<input type="text" name="sex" />
<input type="text" name="index" />
<input type="submit" value="修改"/>
</form>
</div>
<script src="table.js"></script>
</body>
</html>
上面的data值在方案一中可以去掉,方案二
點擊修改時,信息獲取代碼:
/*
* 從table中獲取需要修改的數據
*/
$("#table tbody a").bind("click",function(){
//1 獲取當前對象是哪一個,提交修改時用
var index = $(this).parent().parent().index();
$("form[name=form]").attr("data",index);
//2 傳遞data值
$("input[name=index]").val($(this).attr("data"));
//給修改框賦值
var id = $(this).parent().parent().find("td").eq(0).text();
var name = $(this).parent().parent().find("td").eq(1).text();
var sex = $(this).parent().parent().find("td").eq(2).text();
$("input[name=id]").val(id);
$("input[name=name]").val(name);
$("input[name=sex]").val(sex);
});
方案一代碼:
/*
* 1.將修改的數據賦給頁面 根據index標識
*/
$("input[type=submit]").bind("click",function(){
var id = $("input[name=id]").val();
var name = $("input[name=name]").val();
var sex = $("input[name=sex]").val();
//獲取標識(第幾個)
var index = $("form[name=form]").attr("data");
var tbody = $("#table tbody tr");
tbody.eq(index).find("td").eq(0).text(id);
tbody.eq(index).find("td").eq(1).text(name);
tbody.eq(index).find("td").eq(2).text(sex);
return false;
});
方案二代碼:
/*
* 2.將修改的數據賦給頁面 根據data值
*/
$("input[type=submit]").bind("click",function(){
var id = $("input[name=id]").val();
var name = $("input[name=name]").val();
var sex = $("input[name=sex]").val();
//獲取data值
var date = $("input[name=index]").val();
$("a[data='"+date+"']").parent().parent().find("td").eq(0).html(id);
$("a[data='"+date+"']").parent().parent().find("td").eq(1).html(name);
$("a[data='"+date+"']").parent().parent().find("td").eq(2).html(sex);
return false;
});