點(diǎn)擊添加，在表格的最后一行添加一行表單元素，右側(cè)按鈕變?yōu)楸４婧腿∠?#xff08;點(diǎn)擊保存，數(shù)據(jù)用ajax無(wú)刷新添加到界面，點(diǎn)擊取消，取消此行的添加。）點(diǎn)擊編輯，在本行改為表單，帶有原來(lái)的值，右側(cè)按鈕變?yōu)榇_認(rèn)和取消。

1.建一個(gè)容器

<div id="biaoge"><table border="1" cellspacing="0" cellpadding="0" width="800"><tr id="hang"><th>序號(hào)</th><th>名稱(chēng)</th><th>鏈接</th><th id="tianjia"><button id="tj">添加</button></th></tr></table></div>

2.js代碼

jiazai(); /*1.點(diǎn)擊添加*/ $("#tj").click(function(){ /*點(diǎn)擊添加，定義一個(gè)新的字符串，扔到表格的后面*/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);/*點(diǎn)擊取消*/$(".quxiao").click(function(){$(this).parent().parent().remove(); /* 找父級(jí)元素，一直找到<tr>,刪除這個(gè)<tr>*/});/*點(diǎn)擊保存 */$(".baocun").click(function(){var hang=$(this).parent().parent(); /* 找父級(jí)元素，一直找到<tr>,刪除這個(gè)<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('確認(rèn)保存？',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("欄目名稱(chēng)不能為空");}}})},function(){}); });});/*2.點(diǎn)擊刪除*/ $(".shanchu").click(function(){var bs=$(this).attr("bs");qikoo.dialog.confirm('確認(rèn)刪除？',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.點(diǎn)擊編輯 $(".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+"'>確認(rèn)</button><button class='quxiao'>取消</button></td></tr>";hang.replaceWith(addtd); /*點(diǎn)擊編輯，定義一個(gè)新的字符串，帶有原來(lái)的值的表單，然后把原來(lái)的<tr>替換*//* 點(diǎn)擊取消*/$(".quxiao").click(function(){$(this).parent().parent().remove();history.go(0);});/*點(diǎn)擊確認(rèn) */$(".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('確認(rèn)修改？',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("欄目名稱(chēng)不能為空");}}})},function(){}); });});function jiazai() /*加載數(shù)據(jù)*/ {$.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);}});}});

?

轉(zhuǎn)載于:https://www.cnblogs.com/xingyue1988/p/6671903.html

總結(jié)

以上是生活随笔為你收集整理的js控制表格实时编辑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。