ในการพัฒนาแอปพลิเคชันข้อมูลอินพุตบางอย่างเป็นแบบไดนามิกเช่นประสบการณ์การทำงานที่เราต้องการลงทะเบียนพนักงานเช่นตัวเลขต่อไปนี้
ถ้ามันถูกสร้างขึ้นสู่จุดจบคุณสามารถเติมได้ในสามครั้งจะเป็นอย่างไรถ้าเป็นสี่? หรือมากกว่านั้นไม่สามารถเพิ่มได้หรือไม่? ดังนั้นนี่จึงไม่ดีเราสามารถเพิ่มแถวตารางแบบไดนามิกดังที่แสดงในรูปด้านล่างเพิ่มแถวและป้อนแถวของข้อมูลซึ่งมีความยืดหยุ่นมากขึ้น
ลองมาดูวิธีการรวม JavaScript ใน ASP และ ASP.NET เพื่อให้ได้เอฟเฟกต์นี้:
ก่อนอื่นการเพิ่มตารางแบบไดนามิกจะถูกนำไปใช้ในเบื้องหน้า เมื่อมีสถานีต่อไปอาจเป็นไปได้ แต่อาจใช้ AJAX ซึ่งเป็นปัญหามากดังนั้นจึงเป็นการดีที่สุดที่จะใช้ JavaScript เพื่อนำไปใช้ ต่อไปนี้มีสองวิธีในการเพิ่มแถวตารางแบบไดนามิก:
ประเภทแรก: ซอร์สโค้ด
JavaScript:
<script type = "text/javascript">/** // * ฟังก์ชั่นนี้ใช้เพื่อเพิ่มหนึ่งแถวแบบไดนามิก * tabobj: ตารางเป้าหมาย * colnum: จำนวนคอลัมน์ที่ของแถวในตาราง * sorpos: แหล่งที่มาของแถวใหม่ * TARGPOS: ตำแหน่งที่จะเพิ่มแถวใหม่ * */ ฟังก์ชั่น addrow (tabobj, colnum, sorpos, targpos) {var ntr = tabobj.insertrow (tabobj.rows.length-targpos); // แทรกแถวใหม่ลงในตารางที่ได้รับการแต่งตั้งใน // ตำแหน่งที่ได้รับการแต่งตั้ง var trs = tabobj.getElementsByTagname ('tr'); // รับคอลเลกชัน TRS จากตารางที่ได้รับการแต่งตั้ง var sortr = trs [sorpos]; // วางตำแหน่ง sortr var tds = sortr.getElementsByTagname ('td'); // รับคอลเลกชัน TDS จากแถวที่ได้รับการแต่งตั้งถ้า (colnum == 0 || colnum == undefined || colnum == isnan) {colnum = tabobj.rows [0] .cells.length; } var ntd = array ใหม่ (); // สร้างอาร์เรย์ TDS ใหม่สำหรับ (var i = 0; i <colnum; i ++) {// traverl tds ในแถว ntd [i] = ntr.insertcell (); // สร้างเซลล์ใหม่ ntd [i] .id = tds [0] .id; // คัดลอก ID ของ TD ไปยังเซลล์ใหม่ - ความสนใจ! คำต่อท้ายของ TDS // จะต้องได้รับการแต่งตั้ง NTD [i] .innerhtml = tds [i] .innerhtml; // คัดลอก ID ของ TD ไปยังเซลล์ใหม่ - ความสนใจ! คำต่อท้ายของ TDS // จะต้องได้รับการแต่งตั้ง NTD [i] .innerhtml = tds [i] .innerhtml; // คัดลอกค่าใน ntd [i] 's innerhtml จาก tds ที่สอดคล้องกัน}}/** // * ฟังก์ชั่นนี้ใช้เพื่อลบแถวที่ได้รับการแต่งตั้งในตารางที่ได้รับการแต่งตั้ง * tabobj: ตารางที่ได้รับการแต่งตั้ง * targpos: ตำแหน่งแถวเป้าหมาย * i <tabobj.rows.length; i ++) {ถ้า (tabobj.getElementByTagname ('img') [i] == btnobj) {tabobj.deleterow (i+targpos); }}}} </script>HTML
<table id = tabuserinfo border = 1> <tr> <td> ชื่อ </td> <td> เพศ </td> <td> อายุ </td> <td> โฮสต์ </td> <td> ลบ </td> </tr style = "จอแสดงผล: ไม่มี" id = truserinfo > </td> <td id = tduserInfo> <อินพุต id = ชื่อผู้ใช้ = usensex> </td> <td id = tduserInfo> <อินพุต ID = ชื่อผู้ใช้ = userage> </td> <td id = tduserInfo> <อินพุต id = userlove name = userlove> onclick = "deleterow (document.all.tabuserinfo, 1, this)"> </td> </tr> <tr> <td> <อินพุตประเภท = ค่าปุ่ม = "เพิ่ม" onclick = "addrow (document.all.tabuserinfo, null, 1,1)"> </td> </td>