点击添加，在表格的最后一行添加一行表单元素，右侧按钮变为保存和取消。（点击保存，数据用ajax无刷新添加到界面，点击取消，取消此行的添加。）点击编辑，在本行改为表单，带有原来的值，右侧按钮变为确认和取消。
1.建一个容器
<div id="biaoge">
<table border="1" cellspacing="0" cellpadding="0" width="800">
<tr id="hang"><th>序号</th><th>名称</th><th>链接</th><th id="tianjia"><button id="tj">添加</button></th></tr> </table>
</div>
2.js代码
jiazai();
/*1.点击添加*/
$("#tj").click(function(){ /*点击添加，定义一个新的字符串，扔到表格的后面*/
var str1="<tr><td><input type='text' class='bd1'></td><td><input type='text' class='bd2'></td><td><input type='text' class='bd3'></td><td id='caozuo'><button class='baocun'>保存</button><button class='quxiao'>取消</button></td></tr>";
$("#biaoge table").append(str1);
/*点击取消*/
$(".quxiao").click(function(){
$(this).parent().parent().remove(); /* 找父级元素，一直找到<tr>,删除这个<tr>*/
});
/*点击保存 */
$(".baocun").click(function(){
var hang=$(this).parent().parent(); /* 找父级元素，一直找到<tr>,删除这个<tr>*/
var inpt=hang.find("input"); /* 从<tr>中找到所有的input,再取值*/
var inpt1=inpt.eq(0).val();
var inpt2=inpt.eq(1).val();
var inpt3=inpt.eq(2).val();
qikoo.dialog.confirm('确认保存？',function(){
$.ajax({
url:"../chuli/caidanchuli.php",
data:{type:2,inpt1:inpt1,inpt2:inpt2,inpt3:inpt3},
type:"POST",
dataType:"TEXT",
success: function(data)
{
if(data=="ok")
{
history.go(0);
}else if(data=="kong")
{
alert("栏目名称不能为空");
}
} })
},function(){ }); }); }); /*2.点击删除*/
$(".shanchu").click(function(){
var bs=$(this).attr("bs");
qikoo.dialog.confirm('确认删除？',function(){
$.ajax({
url:"../chuli/caidanchuli.php",
data:{type:1,bs:bs},
type:"POST",
dataType:"TEXT",
success: function(data)
{
if(data=="ok")
{
history.go(0);
}else
{ }
} })
},function(){ }); }); //3.点击编辑
$(".bianji").click(function(){
var hang=$(this).parent().parent();
var td=hang.find("td");
var td1=td.eq(0).text();
var td2=td.eq(1).text();
var td3=td.eq(2).text();
var bs1=$(this).attr("bs1");
var addtd="<tr><td><input type='text' class='bd1' value='"+td1+"'/></td><td><input type='text' class='bd2' value='"+td2+"'/></td><td><input type='text' class='bd3' value='"+td3+"'/></td><td id='caozuo'><button class='queren' bs2='"+bs1+"'>确认</button><button class='quxiao'>取消</button></td></tr>";
hang.replaceWith(addtd); /*点击编辑，定义一个新的字符串，带有原来的值的表单，然后把原来的<tr>替换*/ /* 点击取消*/
$(".quxiao").click(function(){
$(this).parent().parent().remove();
history.go(0);
}); /*点击确认 */
$(".queren").click(function(){ var hang=$(this).parent().parent();
var inpt=hang.find("input");
var inpt1=inpt.eq(0).val();
var inpt2=inpt.eq(1).val();
var inpt3=inpt.eq(2).val();
var bs2=$(this).attr("bs2");
qikoo.dialog.confirm('确认修改？',function(){
$.ajax({
url:"../chuli/caidanchuli.php",
data:{type:3,inpt1:inpt1,inpt2:inpt2,inpt3:inpt3,bs2:bs2},
type:"POST",
dataType:"TEXT",
success: function(data)
{
if(data=="ok")
{
history.go(0);
}else if(data=="kong")
{
alert("栏目名称不能为空");
}
} })
},function(){ }); }); }); function jiazai() /*加载数据*/
{
$.ajax({
data:{type:0},
type:"post",
url:"../chuli/caidanchuli.php",
async:false,
datatype:"TEXT",
success:function(data)
{
var str="";
var hang=data.split("|");
for(var i=0;i<hang.length;i++)
{
var lie=hang[i].split("^");
str=str+"<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td id='caozuo'><button class='bianji' bs1='"+lie[0]+"'>编辑</button><button class='shanchu' bs='"+lie[0]+"'>删除</button></td></tr>";
}
$("#biaoge table").append(str); }
});
} });