As informações acumuladas para o próximo formulário de entrada dinâmica são muito boas. Deixe -me compartilhar com você para sua referência. Se houver melhores plug-ins e encapsulações, compartilhe-o. .
O código -chave é o seguinte:
<script type = "text/javascript"> var currentactiverow; // cor selecionada var customTable = function () {}; customTable.prototype = {init: {ajaxurl: "", tid: "tbody", delmsg: "confirme a excluir?"}, Ajax: function (params, chamada) {var th That = this; $. that.init.ajaxurl, dados: parâmetros, sucesso: argumentos [1] || function () {}, erro: argumentos [2] || function () {if (window.console) {console.Log (" "getBookbag", aleatória: math.random ()}; var suc = function (data) {if (data.issuccess === 1) {} else {}}; var err = function () {}; ttable.ajax (params, suc, err);}, addRow:}; tbody.Rows.Length; TBody.InserTrow (ROWNO); TBody.Rows [ROWNO] .InsertCell (0); TBody.Rows [ROWNO] .CELLS [0] .AppendChild (Document.CreateTextNode (ROWNO + 1)); // innerText = "0001"; // innerText e innerhtmltbody.rows [rowno] .insertcell (1); tbody.Rows [rowno] .Cells [1] .innerhtml = "<nome de entrada = 'radioorms' tipo = 'radio' value = '1'> </input> "; tbody.rows [rowno] .insertCell (2); tbody.rows [rowno] .Cells [2] .innerhtml =" <nome de entrada = 'Checkboxrms' type = 'caixa de seleção' value = '1'> </input> "; tbody.Rows [rowno] .InSertCell (3); tbody.Rows [ROWNO] .CELLS [3] .innerhtml =" <Nome de entrada = 'descript "'> </input>"; tbody.Rows [rowno] .InSertCell (4); tbody.Rows [rowno] .Cells [4] .innerhtml = "<input type =' button 'value =' delete 'onclick =' ttable.deleterow (event) '/> <input = type =' ADTable.deleterow '' ''/> <input = = 'ADTABLE'. ONCLICK = 'ttable.editrow (event)'/> <a href = 'javascript: void (0)' onclick = 'ttable.moveup (this)'> ↑ </a> <a href = 'javascript: void (0)' onclick = 'tTable.movedwn (this) ttable.ChangeActiverow;}, Deleterow: function (Eve) {if (confirm (this.init.delmsg)) {element = window.event? Window.Event.SrceMement: Eve.Target; var ROWNO = Element.ParentNode.ParentNode.RowIndex; var TBody = document.getElementById (this.init.tid); tbody.deleterow (ROWNO - 1);}}, editrow: function () {var element = window.ewno.event? window.event.srcelement: Eve.Target; Alert (elemento);}, ChangeActiverow: function () {// Defina a cor de fundo da linha de linha selecionada = argumentos [0]; elemento = window.event? window.event.srcelement: Eve.target; obj = element.parentNode; while (obj && obj.tagname! = "tr") {obj = obj.parentnode; if (currentActiverow) currentiVow.style.backColor = "; "Red";}}, CleanwhitaSpace: function (element) {// Tranquilidade através dos nós filhos do elemento para (var i = 0; i <element.childnodes.length; i ++) {var node = element.childnodes [i]; if (node.nodetype == 3 && ! // s/.test (node.nodue)) node.parentnode.removeChild (nó);} // mova a tabela Line para cima e receba o parâmetro como um objeto de link}, moveup: function (_a) {var _table = document.getElementById (this.init.tid); _a.parentnode.parentnode; var _row = currentactiverow; // se não for a primeira ordem de troca de linha se (_row.previoussibling) ttable.swapNode (_Row, _row.previouslbling);}, função: função (_A) {var {var _T {var _T {vareviousl); document.getElementById (this.init.tid); ttable.cleanwhitaSpace (_table); // Obtenha a referência da linha da tabela através do objeto de link // var _row = _a.parentnode.parentNode; var _row = atualize; (_row.NexTSibling) ttable.swapNode (_row, _row.nextsibling);}, swapNode: function (node1, node2) {var _parent = node1.parentnode; var _t1 = node1.nextsibling; if (_t1) _parent.InsertBe antes (node2, _t1); else_parent.appendChild (node2); // insira o node1 na posição original ndoe2 if (_t2) _parent.inserfore (node, _t2); els) CustomTable (); </script>Entre eles:
<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> </tabela> <botão onclick = "ttable.addrow ()" value = "add"> add </button> <button onclick = "ttable.movedwn ()" value = "adicione"> ofic </botão>
O exposto acima é a descrição completa do código de implementação da tabela de criação automática Encapsulada JS, introduzida a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!