La información acumulada para el siguiente formulario de entrada dinámica es muy buena. Déjame compartirlo contigo para tu referencia. Si hay mejores complementos y encapsulaciones, compártelo. .
El código clave es el siguiente:
<script type = "text/javaScript"> var currentActiverow; // seleccionado color var customTable = function () {}; customTable.prototype = {init: {ajaxurl: "", tid: "tbody", delmsg: "confirmar para eliminarlo?"}, Ajax: function (params, callback) {var = this; $. that.init.AJAXURL, Data: Params, Success: Argumentos [1] || "GetBookbag", Random: Math.random ()}; var suc = function (data) {if (data.issuccess ==== 1) {} else {}}; var err = function () {}; ttable.AJAX ((este.AJAX (Suc, err);}, addrow: function () {var tbody = document.getEntById (this.init); tbody.rows.length; tbody.insertrow (rowo); tbody.rows [rowno] .insertcell (0); tbody.rows [rowno] .cells [0] .appendChild (document.createTextNode (rowno + 1)); // innertext = "0001"; // inntext e innerhtmltbody.rows [rowno] .insertcell (1); tbody.rows [robo] .Cells [1] .innerhtml = "<input name = 'RadioMs' tipo = 'radio' ' valor = '1'> </input> "; tbody.rows [rowno] .insertcell (2); tbody.rows [rowno] .Cells [2] .innerhtml =" <input name = 'checkboxrms' type = 'checkbox' valor = '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 [rowo] .insertcell (4); tbody.rows [rowno] .Cells [4] .innerhtml = "<input type =' button 'value =' delete 'onClick =' ttable.deleterow (event) '/> <input type =' bootle valor = 'editar' oncLick = 'ttable.editrow (event) href = 'javascript: void (0)' onClick = 'ttable.moveUp (this)'> ↑ </a> <a href = 'javascript: void (0)' onclick = 'ttable.mOvedown (this)'> ↓ </a> "; tbody.rows [Rowno] .versClick.Clable.ChangeN función (eve) {if (confirmar (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.event? Window.event.SrCelement: eve.target; alert (elemento);}, changeActiverow: function () {// Establezca el color de fondo de la fila seleccionada eve = argumentos [0]; element = window.event? Window.event.SrCelement: eve.target; obj = element.ParentNode; while (obj && obj.tagname! = "tr") {obj = obj.ParentNode; if (currentActiverow )ConActiveRow.style.backgroundcolor = "; "Red";}}, CleanWhiteSpace: function (element) {// Tranquilidad a través de los nodos infantiles de elemento para (var i = 0; i <element.childnodes.length; i ++) {var nodo = element.childnodes [i]; if (node.nodeType == 3 && ! // s/.test (node.nodue)) node.parentnode.removechild (nodo);} // Mueve la fila de la tabla hacia arriba y reciba el parámetro como un objeto de enlace}, MoveUp: function (_a) {var _table = document.getElementById (this.init.tid); ttable.cleanwhitespace (_table); _a.parentnode.parentnode; var _row = currentActiverow; // Si no es el orden de intercambio de la primera fila if (_row.previoussibling) ttable.swapnode (_row, _row.previoussibl);}, se lanza: función (_a) {var _table = = document.getElementById (this.init.tid); ttable.cleanwhitaSpace (_table); // Obtenga la referencia de la fila de tabla a través del objeto de enlace // var _row = _a.parentnode.parentNode; var _row = cotentActiverow; // Si no es la última fila, orden de swap con la siguiente fila si (_row.nextSibling) ttable.swapNode (_row, _row.nextSibling);}, swapNode: function (node1, node2) {var _parent = node1.parentnode; var _t1 = node1.nextsibling; var _t2 = nodextsiBling; ///////sin (_t1) _parent.insertbefore (node2, _t1); else_parent.appendChild (node2); // Inserte el nodo1 en la posición original ndoe2 if (_t2) _parent.insertbefore (node1, _t2); else_parent.appendChild (node1);}} var ttable = new ttable = neoEntre ellos:
<Tabla id = "TableSpan"> <thead id = "head"> <tr onClick = "ttable.changeActiverow (this);"> <td> número de serie </td> <td> default </td> <td> enable </td> <td> opción contenido </td> <td> operación </td> </tr> </table> <ad <ad <ad> id = "tbody"> </tbody> </table> <button onClick = "ttable.addrow ()" value = "add"> add </button> <button onClick = "ttable.moveDown ()" value = "add"> ↓ </button>
Lo anterior es la descripción completa del código de implementación de la tabla de creación automática encapsulada JS presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!