<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
//用于添加一个新行
function do_Add(tag)
{
//首先将DOM对象转换成JQuery对象
//然后获得当前DOM对象的父元素tr
//调用Jquery的clone方法，克隆一个行的副本
var tr = $(tag).parents("tr").clone();
//为了用于操作的列被修改时出现重复
var td = tr.find("td").eq(4).html("");
//判断此行有几列
var count = tr.find("td").length;
//使用each方法绑定当前列的click事件，使该列可以被编辑
tr.find("td").each(function(i){
//避免最后一个列被修改
if(i<count-1){
$(this).click(function(){
editTd(this);
});
}
});
//添加取消事件（创建一个超链接，用于取消添加行）
var cacel = $("<a>").attr("href","#").text("取消").click(function(){
do_cancel(this);
}).appendTo(td);
//追加保存事件（创建一个超链接，用于保存添加行）
var save = $("<a>").attr("href","#").text("保存").click(function(){
do_save(this);
}).appendTo(td);
//把克隆的行添加到表格中
tr.appendTo($("#tbody"));
return false;
}
//用于创建一个输入框,并把这个输入框添加到当前列中，在这个输入框失去焦点的时候把输入值添加到当前的列中
function editTd(tag){
//把DOM对象转换成Jquery对象
var td = $(tag);
//获取当前对象的文本内容
var text = td.html();
//创建一个文本框，把原来的列中的文本值赋值给该文本框
var input=$("<input id='a'>").val(text).blur(function(){
//在该文本框失去焦点的时候，把文本框的值添加到列中
td.html($(this).val()).click(function(){
editTd(this);
});
});
td.html(input).unbind("click");
$("#a")[0].focus();
}
//取消事件
function do_cancel(tag)
{
$(tag).parents("tr").remove();
}
//列的保存事件
function do_save(tag)
{
this.focus();
//获取当前点击的父元素，整个行
var tr =$(tag).parents("tr");
//获取当前行有几列
var count = tr.find("td").length;
//获取当前行的所以文本
tr.find("td").each(function(i){
if(i<count-1){
alert(count+"\n"+$(this).text())
}
});
}
</script>
<style type="text/css">
#Info{border:solid 1px }
#Info td{border:solid 1px ;200px}
</style>
</head>
<body>
<table id="Info">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>链接</td>
<td>时间</td>
<td>操作</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>0</td>
<td>abc</td>
<td>http://www</td>
<td>2012/2/1</td>
<td>
<a href="#" onclick="do_Add(this)">按模板添加</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>