次の動的入力フォームに蓄積された情報は非常に優れています。あなたの参考のためにあなたとそれを共有させてください。より良いプラグインとカプセルがある場合は、共有してください。 。
重要なコードは次のとおりです。
<script type = "text/javascript"> var currentActiverow; // selected color var customtable = function（）{}; customtable.prototype = {init：{ajaxurl： ""、tid： "tbody"、delmsg： "削除を削除する？"}、ajax：function（params、callback）{var that = this = this =。ajax（{tipe： "" that.init.ajaxurl、データ：成功：引数[1] || {}、arguments [2] ||。 "getBookBag"、random：math.random（）}; var suc = function（data）{if（data.issucces === 1）{} else {}} 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 = 'チェックボックス' ' value = '1'> </input> "; tbody.rows [rowno] .insertcell（3）; tbody.rows [rowno] .cells [3] .innerhtml =" <input name = 'destrams' type = 'value =' des " +（rowno + 1） + + "'> </input>"; tbody.rows [rowno] .insertcell（4）; tbody.rows.rows [rowno] .cells [4] .innerhtml = "<input type =' button 'value =' onclick = 'ttable.deleterow（event）'/> <input = 'button' value = 'edit' edit 'edit onclick = 'ttable.editrow（event）'/> <a href = 'javascript：void（0）' onclick = 'ttable.moveup（this）'>↑</a> <a href = 'javascript：void（0）' onclick = 'ttable.modown（this） " = ttable.changeactiverow;}、leleterow：function（eve）{if（cusmend（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 window.event.srcelement：eve.target; alert（element）;}、changeactiverow：function（）{//選択した行の背景色を設定します= 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; "red";}}、cleanwhitespace：function（element）{//静けさfor（var i = 0; i <element.childnodes.length.length; i ++）{var node = element.childnodes [i]; if（node.nodetype = 3 && ！// s/.test（node.nodue））node.parentnode.RemoveChild（node）;} //テーブルの列を上に移動してリンクオブジェクトとしてパラメーターを受信します}、move：function（_a）{var _table = document.getelementbyid（this.init.tid）; ttable.cleanwhitepepecable（_iTepespecable _a.parentnode.parentnode; var _row = currentActiverow; //最初の行のスワップ順序でない場合は（_row.previoussibling）ttable.swapnode（_row.previoussibling）;}、movedown：function（_ _table = var _table = function（_row.previoussibling） document.getElementById（this.init.tid）; ttable.cleanwhitespace（_table）; // link objectを介してテーブル行の参照を取得します// var _row = _a.parentnode.parentnode; （_Row.NextSibling）ttable.swapNode（_ROW、_ROW.NEXTSIBLING）;}、swapNode：function（node1、node2）{var _parent = node1.parentnode; var _t1 = node1.nextsibling; if（_t1）_parent.insertbefore（node2、_t1）; else_parent.appendchild（node2）; // node1を元のndoe2位置に挿入しますif（_t2）_parent.insertbefore（node1、_t2）; els_parent.phild（node1）;その中で：
<表ID = "TableSpan"> <thead id = "head"> <tr onclick = "ttable.changeactiverow（this）;"> <td> serial number </td> <td> defayour </td> <td> enable </td> <td> option content </td> <td> operation id = "tbody"> </tbody> </table> <button onclick = "ttable.addrow（）" value = "add"> add </button> <button onclick = "ttable.movedown（）" value = "add">↓</button>
上記は、編集者が紹介したJSカプセル化された自動作成テーブルの実装コードの完全な説明です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！