다음 동적 입력 양식에 축적 된 정보는 매우 좋습니다. 참조를 위해 공유하겠습니다. 더 나은 플러그인과 캡슐화가 있으면 공유하십시오. .
키 코드는 다음과 같습니다.
<script type = "text/javaScript"> var currentActiverow; // 선택한 색상 var customtable = function () {}; customtable.prototype = {init : {ajaxurl : "", tid : "tbody", delmsg : "삭제 확인?"}, ajax : ajax : var that = the = the = $. that.init.ajaxurl, data : success : arguments [1] || intruction () || "getbookbag", random : math.random ()}; var suc = function (data) {if (data.issuccess === 1) {} else {}}; var err = function () {}; ttable.ajax (params, suc, err);}; 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 ="<입력 이름 = 'descript'type = 'text'value = 'des " + (rowno + 1) + " '> </input>"; tbody.rows [rowno] .insertcell (4); tbody.rows [rowno] .Cells [4] .innerHtml = "<입력 유형 ='button 'value ='Onclick = 'ttable.deleterow (event)'/> <value = 'edit' onclick = 'ttable.editrow (이벤트)'/> <a href = 'javaScript : void (0)'onclick = 'ttable.moveUp (this)'> ↑ ↑ </a> <a href = 'javaScript : void (0)'onclick = 'ttable.movedown (this)' '; ttable.changeactiverow;}, deleterow : function (eve) {if (확인 (확인 (this.init.delmsg)) {element = window.event? wind Window.event.srcelement : eve.target; alert (elert (element);}, changeactiverow : function () {// 선택한 행의 배경색을 설정합니다. wind "빨간색";}}, cleanwhitespace : function (element) {// 요소의 자식 노드를 통한 10 장; i <element.childnodes.length; i ++) {var node = element.childnodes [i]; if (node.nodetype = 3 && ! // s/.test (node.nodue)) node.parentNode.removeChild (node);} // 테이블 행을 링크 객체로 이동하고 매개 변수를 링크 객체}, moveUp : function (_a) {var _table = document.getElementById (this.init.tid); cleanwheitspace (_table); _A.parentNode.parentNode; var _row = currentActiverow; // 첫 번째 행 스왑 순서가 아닌 경우 (_row.previousSibling) ttable.swapnode (_row, _row.previousSibling);}, moveDDown : function (_A) {var _table = document.getElementById (this.init.tid); ttable.cleanwhitespace (_table); // 링크 객체를 통해 테이블 행 참조를 가져옵니다. // var _row = _a.parentNode.parentNode; var _row = currentActiverow; (_row.nextibling) ttable.swapnode (_row, _row.nextsibling);}, Swapnode : 함수 (node1, node2) {var _parent = node1.parentNode; var _t1 = node1.nextsibling; var _t2 = node2.nextsiblich; (_t1) _parent.insertbefore (node2, _t1); else_parent.appendChild (node2); // node1을 원래 ndoe2 위치에 삽입하는 경우 (_t2) _parent.insertbefore (node1, _t2); else_parent.appendchild (node1);}}}}}}}}}}} CustomTable (); </script>그중 :
<table id = "spailspan"> <thead id = "head"> <tr onclick = "ttable.changeactiverow (this);"> <td> Serial Number </td> <td> default </td> <td> enable </td> <td> 옵션 </td> Operation </td> </td> </td> id = "tbody"> </tbody> </table> <button onclick = "ttable.addrow ()"value = "add"> add </button> <버튼 onclick = "ttable.movedown ()"value = "add"> ↓ </button>
위는 편집자가 소개 한 JS 캡슐화 된 자동 생성 테이블의 구현 코드에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!