正常的操作描述如下：
1、点击[b]Edit[/b]时，可编辑数据，然后点击[b]Save[/b]，显示编辑后的数据；
2、点击[b]Add[/b]时，表格添加一行，可在输入框输入数据，然后点击[b]Save[/b]，显示输入的数据；
[table]
|[b]Id[/b] | [b]Name[/b] | [b]Action[/b] |
|0 | abc | [b]Add[/b] [b]Edit[/b] |
|1 | 1 | [b]Add[/b] [b]Edit[/b] |
[/table]
问题是点击[b]Add[/b]，输入数据，点击[b]Save[/b]无反应啊，求教是什么原因？
下面的代码可以直接复制粘贴运行。
[code="java"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>无标题文档</title>
<style type="text/css">
#test {
border: solid 1px
}
#test td {
border: solid 1px;
width: 200px
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$trs = $("tr");//
var head = true;
var editVal = {};//编辑时存储原始值
var button = "<td><a href='#' class='add'>Add</a> <a href='#' class='edit'>Edit</a> <a href='#' class='save'>Save</a>";
$trs.each(function (i, tr) {//添加操作列
if (head) {
$(tr).append("<td>Action</td>");
head = false;
return true;
}
$(tr).append(button);
});
$(".save").hide();//隐藏确定、取消按钮；只有在添加、编辑状态时显示
/**
* 正常状态下的添加事件
* 在当前行下插入一行
*/
$(".add").click(function(){
var $tr = $(this).parents("tr");
var tr = $("<tr>");
var count = $("td", $tr).length;
$("td",$tr).each(function(i){
if(i<count-1){
tr.append($("<td>").html($("<input>")));
}
});
tr.attr("pId",$tr.attr("id"));
tr.append(button);
$tr.after(tr);
$(".add, .edit").hide();
$(".save", tr).show();
return false;
});
/**
* 正常状态下的编辑事件
*
*/
$(".edit").click(function () {
var $tr =$(this).parents("tr");
var count = $("td",$tr).length;
$("td",$tr).each(function(i){
if(i<count-1){
//编辑前应保存原始值
editVal[i] = $(this).text();
$(this).html($("<input>").val($(this).text()));
}
});
$(".add, .edit").hide();
$(".save", $tr).show();
return false;
});
/**
* 编辑状态下的保存事件
* 添加状态下的取消事件
*/
$(".save").click(function () {
var $tr =$(this).parents("tr");
var count = $("td",$tr).length;
$("td",$tr).each(function(i){
if(i<count-1){
//alert($(this).find("input").val());
$(this).html($(this).find("input").val());
}
});
$(".add, .edit").show();
$(".save", $tr).hide();
return false;
});
});
</script>
</head>
<body>
<table id="test">
<thead>
<tr>
<td>
Id
</td>
<td>
Name
</td>
</tr>
</thead>
<tbody id="tbody">
<TR id="1">
<td>
0
</td>
<td>
abc
</td>
</TR>
<TR id="2">
<td>
1
</td>
<td>
1
</td>
</TR>
</tbody>
</table>
</body>
[/code]
