Table enables double-clicking to edit, add, and delete rows-JS Tutorial-php.cn

This article mainly introduces the functions of bootstrap table to double-click to edit, add, and delete rows. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

html：

名称	值	操作

Copy after login

js：

function save_para_table(){ var tableinfo = gettableinfo(); alert(tableinfo); } //get table infomation function gettableinfo(){ var key = ""; var value = ""; var tabledata = ""; var table = $("#para_table"); var tbody = table.children(); var trs = tbody.children(); for(var i=1;i"); //4，设置文本框的值是保存起来的文本内容 input.attr("value",text); input.bind("blur",function(){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); td.attr("onclick", "tdclick(this)"); }); input.keyup(function(event){ var myEvent =event||window.event; var kcode=myEvent.keyCode; if(kcode==13){ var inputnode=$(this); var inputtext=inputnode.val(); var tdNode=inputnode.parent(); tdNode.html(inputtext); tdNode.click(tdclick); } }); //5，将文本框加入到td中 td.append(input); var t =input.val(); input.val("").focus().val(t); // input.focus(); //6,清除点击事件 td.unbind("click"); } function addtr(){ var table = $("#para_table"); var tr= $("" + ""+"" + ""+"" + ""); table.append(tr); } function deletetr(tdobject){ var td=$(tdobject); td.parents("tr").remove(); }

Copy after login

Related recommendations:

How to implement the jQuery double-click editing table function

The event attribute ondblclick that is triggered when the mouse double-clicks an element in html

Use jQuery to realize the double-click editing table function

The above is the detailed content of Table enables double-clicking to edit, add, and delete rows. For more information, please follow other related articles on the PHP Chinese website!