ข้อมูลที่สะสมสำหรับแบบฟอร์มอินพุตแบบไดนามิกถัดไปนั้นดีมาก ให้ฉันแบ่งปันกับคุณสำหรับการอ้างอิงของคุณ หากมีปลั๊กอินและ encapsulation ที่ดีกว่าโปรดแบ่งปัน -
รหัสคีย์มีดังนี้:
<script type = "text/javascript"> var currentactiverow; // สีที่เลือก var customtable = function () {}; customtable.prototype = {init: {ajaxurl: "", tid: "tbody", delmsg: "ยืนยันเพื่อลบมัน?"}, ajax: function (params, callback) {var = this; $. That.init.ajaxurl, data: params, ความสำเร็จ: อาร์กิวเมนต์ [1] || function () {}, ข้อผิดพลาด: อาร์กิวเมนต์ [2] || ฟังก์ชั่น () {if (window.console) "getBookBag", สุ่ม: math.random ()}; var suc = ฟังก์ชั่น (ข้อมูล) {ถ้า (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 // innertext = "0001"; // innertext และ innerhtmltbody.rows [rowno] .insertcell (1); tbody.rows [rowno] .cells [1] .innerhtml = "<อินพุตชื่อ = 'radiorms' type = 'Radio' value = '1'> </input> "; tbody.rows [rowno] .insertcell (2); tbody.rows [rowno] .cells [2] .innerhtml =" <อินพุตชื่อ = 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 = "<อินพุตประเภท =' ปุ่ม 'ค่า =' ลบ 'onclick =' ttable.deleterow (เหตุการณ์) ' onclick = 'ttable.editrow (เหตุการณ์)'/> <a href = 'javaScript: void (0)' onclick = 'ttable.moveup (นี้)'> ↑ </a> <a href = 'javascript: void (0) ttable.changeactiverow;}, deleterow: ฟังก์ชัน (eve) {ถ้า (ยืนยัน (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: ฟังก์ชัน () window.event.srcelement: eve.target; การแจ้งเตือน (องค์ประกอบ);}, changeCtiverow: function () {// ตั้งค่าสีพื้นหลังของแถวที่เลือก eve = อาร์กิวเมนต์ [0]; element = window.event? window.event.srcelement: eve.target; obj = element.parentnode; ในขณะที่ (obj && obj.tagname! = "tr") {obj = obj.parentNode; ถ้า (ปัจจุบัน) currentactiverow.style.style.backgroundroundround "สีแดง";}}, cleanwhitespace: ฟังก์ชั่น (องค์ประกอบ) {// ความเงียบสงบผ่านโหนดลูกขององค์ประกอบสำหรับ (var i = 0; i <element.childnodes.length; i ++) {var node = element.childnodes [i] ! // s/.test (node.nodue)) node.parentNode.removeChild (โหนด);} // เลื่อนแถวตารางขึ้นและรับพารามิเตอร์เป็นวัตถุลิงก์}, movup: function (_a) {var _table = document.getElementByid (this.init.tid); _a.parentNode.parentNode; var _row = currentActiVerow; // ถ้าไม่ใช่ลำดับการแลกเปลี่ยนแถวแรกถ้า (_row.previoussibling) ttable.swapnode (_row, _row.previoussibling); document.getElementById (this.init.tid); ttable.cleanwhitespace (_table); // รับการอ้างอิงของแถวตารางผ่านวัตถุลิงก์ // var _row = _a.parentnode.parentNode; var _row = currentactiverow; // (_row.nextsibling) ttable.swapnode (_row, _row.nextsibling);}, swapnode: ฟังก์ชั่น (node1, node2) {var _parent = node1.parentNode; var _t1 = node1.nextsibling; ตำแหน่งถ้า (_t1) _parent.insertbefore (node2, _t1); else_parent.appendchild (node2); // แทรก node1 ไปยังตำแหน่ง ndoe2 ดั้งเดิมถ้า (_t2) _parent.insertbefore (node1, _t2); CustomTable (); </script>ในหมู่พวกเขา:
<table id = "twatespan"> <thead id = "head"> <tr onclick = "ttable.changeActiverow (นี่);"> <td> หมายเลขซีเรียล </td> <td> ค่าเริ่มต้น </td> <td> enable </td> <td> เนื้อหาตัวเลือก </td> id = "tbody"> </tbody> </table> <ปุ่ม onclick = "ttable.addrow ()" value = "เพิ่ม"> เพิ่ม </button> <button onclick = "ttable.movedown ()" value = "เพิ่ม"> ↓ </button>
ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของรหัสการใช้งานของตารางการสร้างอัตโนมัติ JS ที่ห่อหุ้มด้วยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!