The information accumulated for the next dynamic input form is very good. Let me share it with you for your reference. If there are better plug-ins and encapsulations, please share it. .
The key code is as follows:
<script type="text/javascript">var currentActiveRow; //Selected color var customTable = function() { };customTable.prototype = {init: {ajaxUrl: "",tId: "tbody",delMsg: "Confirm 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 = function(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='descript' type='text' value='des" + (rowNo + 1) + "'></input>";tbody.rows[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)'>↑</a> <a href='javascript:void(0)' onclick='ttable.moveDown(this)'>↓</a>";tbody.rows[rowNo].onclick = ttable.changeActiveRow;},deleteRow: function(eve) {if (confirm(this.init.delMsg)) {element = window.event ? window.event.srcElement : eve.target;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.target;alert(element);},changeActiveRow: function() { //Set the background color of the selected row eve = arguments[0];element = window.event ? window.event.srcElement : eve.target;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) {//Tranquility through the child nodes of 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 and receive the parameter as a link object}, moveUp: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//If it is not the first row swap order if (_row.previousSibling)ttable.swapNode(_row, _row.previousSibling);},movedDown: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//Get the reference of the table row through the link object//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//If it is not the last row, swap order with 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 node1 position if (_t1)_parent.insertBefore(node2, _t1);else_parent.appendChild(node2);//Insert node1 to the original ndoe2 position if (_t2)_parent.insertBefore(node1, _t2);else_parent.appendChild(node1);}}var ttable = new customTable();</script>Among them:
<table id="tableSpan"><thead id="head"><tr onclick="ttable.changeActiveRow(this);"><td>Serial number</td><td>Default</td><td>Enable</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.moveDown()" value="Add">↓</button>
The above is the complete description of the implementation code of the JS encapsulated automatic creation table introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!