Javascript-encapsulated implementation code for automatic table creation and JS-encapsulated table code

Javascript-encapsulated implementation code for automatic table creation and JS-encapsulated table code

The materials accumulated for the next Dynamic Input table are very good. I will share them with you for your reference. If there are better plug-ins and packages, share them with you ..

The key code is as follows:

<Script type = "text/javascript"> var currentActiveRow; // The selected color var customTable = function () {}; customTable. prototype = {init: {ajaxUrl: "", tId: "tbody", delMsg: "Are you sure you want to delete it? "}, Ajax: function (params, callback) {var that = this; $. ajax ({type: "get", cache: false, dataType: "json", url: that. init. ajaxUrl, data: params, success: arguments [1] | function () {}, error: arguments [2] | function () {if (window. console) {console. log ("error log:" + data. responseText) ;}}) ;}, initData: function () {var that = this; var params = {ajaxMethod: "getbookbag", random: Math. random ()}; var suc = fu Nction (data) {if (data. isSuccess = 1) {}else {}}; var err = function () {}; ttable. ajax (params, suc, err) ;}, addRow: function () {var tbody = document. getElementById (this. init. tId); var rowNo = tbody. rows. length; tbody. insertRow (rowNo); tbody. rows [rowNo]. insertCell (0); tbody. rows [rowNo]. cells [0]. appendChild (document. createTextNode (rowNo + 1); // innerText = "0001"; // innerText and innerHTMLtbody. rows [rowNo]. InsertCell (1); tbody. rows [rowNo]. cells [1]. innerHTML = "<input name = 'radiorms' type = 'radio' value = '1'> </input>"; tbody. rows [rowNo]. insertCell (2); tbody. rows [rowNo]. cells [2]. innerHTML = "<input name = 'checkboxrms 'type = 'checkbox' value = '1'> </input>"; tbody. rows [rowNo]. insertCell (3); tbody. rows [rowNo]. cells [3]. innerHTML = "<input name = 'Demo' type = 'text' value = 'des" + (rowNo + 1) + "'> </input>"; tbody. r Ows [rowNo]. insertCell (4); tbody. rows [rowNo]. cells [4]. innerHTML = "<input type = 'button 'value = 'delete' onclick = 'ttable. deleteRow (event) '/> <input type = 'button' value = 'edit 'onclick = 'ttable. editRow (event) '/> <a href = 'javascript: void (0) 'onclick = 'ttable. moveUp (this) '> cursor </a> <a href = 'javascript: void (0) 'onclick = 'ttable. moveDown (this) '> finished </a> "; tbody. rows [rowNo]. onclick = ttable. changeActiveRow;}, deleteRow: functi On (eve) {if (confirm (this. init. delMsg) {element = window. event? Window. event. srcElement: eve.tar get; var rowNo = element. parentNode. parentNode. rowIndex; var tbody = document. getElementById (this. init. tId); tbody. deleteRow (rowNo-1) ;}}, editRow: function () {var element = window. event? Window. event. srcElement: eve.tar get; alert (element) ;}, changeActiveRow: function () {// set the background color of the selected row eve = arguments [0]; element = window. event? Window. event. srcElement: eve.tar get; obj = element. parentNode; while (obj & obj. tagName! = "TR") {obj = obj. parentNode; if (currentActiveRow) currentActiveRow. style. backgroundColor = ""; currentActiveRow = obj; currentActiveRow. style. backgroundColor = "Red" ;}}, cleanWhitespace: function (element) {// traverse the child node of the element for (var I = 0; I <element. childNodes. length; I ++) {var node = element. childNodes [I]; if (node. nodeType = 3 &&! /\ S /. test (node. nodue) node. parentNode. removeChild (node);} // move the table row up. The receiving parameter is a link object}. moveUp: function (_ a) {var _ table = document. getElementById (this. init. tId); ttable. cleanWhitespace (_ table); // var _ row = _. parentNode. parentNode; var _ row = currentActiveRow; // if it is not the first line, the order of if (_ row. previussibling) ttable. swapNode (_ row, _ row. previussibling);}, moveDown: function (_ a) {var _ table = document. getElementById (this. init. tId); ttable. cleanWhitespace (_ table); // obtain the reference of the table row through the link object // var _ row = _. parentNode. parentNode; var _ row = currentActiveRow; // if the last row is not the same as the next row, if (_ row. nextSibling) ttable. swapNode (_ row, _ row. nextSibling) ;}, swapNode: function (node1, node2) {var _ parent = node1.parentNode; var _ t1 = node1.nextSibling; var _ t2 = node2.nextSibling; // insert node2 to the original location of node1 if (_ t1) _ parent. insertBefore (node2, _ t1); else_parent.appendChild (node2); // insert node1 to the ndoe2 position if (_ t2) _ parent. insertBefore (node1, _ t2); else_parent.appendChild (node1) ;}} var ttable = new customTable (); </script>

Here, in HTML:

<Table border = "1" id = "tableSpan"> <thead id = "thead"> <tr onclick = "ttable. changeActiveRow (this ); "> <td> NO. </td> <td> default </td> <td> enabled </td> <td> Option content </td> <td> operation </td> </tr> </thead> <tbody id = "tbody"> </tbody> </table> <button onclick = "ttable. addRow () "value =" add "> Add </button> <button onclick =" ttable. moveUp () "value =" add "> button </button> <button onclick =" ttable. moveDown () "value =" add "> finished </button>

The above is a full description of the implementation code of the JS-encapsulated automatic table creation. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!