Les informations accumulées pour le prochain formulaire d'entrée dynamique sont très bonnes. Permettez-moi de le partager avec vous pour votre référence. S'il y a de meilleurs plug-ins et encapsulations, veuillez le partager. .
Le code clé est le suivant:
<script type = "text / javascript"> var currentAtiverow; // Couleur sélectionnée var personnalisable = function () {}; customTable.prototype = {init: {ajaxurl: "", tid: "tbody", delmsg: "Confirmer to lelete it?"}, Ajax: function (params, rappel) {var that = this; $. qui.init.ajaxurl, Data: Params, Success: Arguments [1] || fonction () {}, erreur: arguments [2] || fonction () {if (window.console) {console.log ("Erreur "getBookbag", aléatoire: math.random ()}; var suc = function (data) {if (data.issuccess === 1) {} else {}}; var err = function () {}; tteable.ajax (params, suc, err);}, addRow: function () {var tody = document.getElement tbody.Rows.length; tbody.insertrow (rowno); tBody.Rows [Rowno] .InsertCell (0); tBody.Rows [Rowno] .Cells [0] .APPENDCHILD (document.CreateExtNode (Rowno + 1)); // innertext = "0001"; // innertext et innerhtmltbody.rows [Rowno] .InsertCell (1); tbody.Rows [Rowno] .Cells [1] .InnerHtml = "<entrée Nom = 'Radiorms' Type = 'radio'. Value = '1'> </ entrée> "; tBody.Rows [Rowno] .InsertCell (2); TBODY.ROWS [ROWNO] .Cells [2] .InnerHtml =" <Input Name = 'Checkboxrms' Type = 'Checkbox' value = '1'> </ entrée> "; tBody.Rows [Rowno] .InsertCell (3); tBody.Rows [Rowno] .Cells [3] .InnerHtml =" <Input Name = 'Descript' Type = 'Text' Value = 'DES "+ (Rowno + 1) + "'> </ entrée>"; 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 = 'tteable.editrow (événement)' /> <a href = 'javaScript: void (0)' onclick = 'tTable.moveup (this)'> ↑ </a> <a href = 'Javascrip tTable.ChangeActiveRow;}, Deleterrow: function (eve) {if (confirm (this.init.delmsg)) {élément = 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 (élément);}, changeciverow: function () {// définir la couleur d'arrière-plan de la ligne sélectionnée eve = arguments [0]; élément = window.event? window.event.srcelement: eve.target; obj = element.parentNode; while (obj && obj.tagname! = "tr") {obj = obj.parentNode; if (currentActiverow) currentActiverow.style.backgroundcolor = "" currentOrow = obj; currentow.style.style. "Red";}}, CleanWhitespace: fonction (élément) {// Tranquility via les nœuds enfants de l'élément pour (var i = 0; i <element.childnodes.length; i ++) {var node = élément.childNodes [i]; if (node.nodetype == 3 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& & ! // s / .test (node.nogue)) node.parentnode.removechild (node);} // déplace la ligne de table et recevoir le paramètre comme un objet de lien}, movup: function (_a) {var _Table = document.getElementByid (this.init.tid); tteable.cleanhikeSpace (_Table); _a.parentNode.parentNode; var _row = currentAtiverow; // Si ce n'est pas le premier ordre d'échange de ligne if (_row.PreviousSibling) tTable.swapnode (_row, _Row.PreviousSibling);}, MovDown: function (_a) {var _Table = Document.getElementById (this.init.tid); tteable.cleanwhitespace (_Table); // Obtenez la référence de la ligne de table via l'objet de lien // var _row = _a.parentNode.parentNode; var _row = CurrentAtiverow; // Si ce n'est pas la dernière ligne, échange avec la ligne suivante si (_row.nextsibling) tteable.swapnode (_row, _row.nextsibling);}, swapnode: function (node1, node2) {var _parent = node1.parentNode; var _t1 = node1.nextsibling; var _t2 = node2.NEXTSIBLING; if (_t1) _parent.insertBefore (node2, _t1); else_parent.appendChild (node2); // insérer Node1 à la position ndoe2 d'origine if (_t2) _parent.insertbefore (node1, _t2); else_parent.APPENDCHILD (Node1);}} var ttable = new CustomTable (); </cript>Parmi eux:
<table id = "cuillère à soupe"> <thead id = "head"> <tr onClick = "tTable.Changeativerow (this);"> <td> numéro de série </td> <td> contenu de l'option </td> <td> id = "tbody"> </ tbody> </ table> <bouton onClick = "tTable.Addrow ()" value = "add"> add </ bouton> <bouton onClick = "tTable.Movedown ()" value = "add"> ↓ </ bouton>
Ce qui précède est la description complète du code d'implémentation de la table de création automatique encapsulée JS qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!