用两种方法获取和修改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;
});