ฉันไม่ได้พูดเรื่องไร้สาระมากฉันจะโพสต์รหัสโดยตรง
<html> <head> <title> ตาราง </title> </head> <body> <table border = 1> <thead> <td> ชื่อแรก </td> นามสกุล </td> <td> <///td> td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> สาม </td> <td> <type type = button = เพิ่ม onClick = เพิ่ม ()> <อินพุต type = button value = del onclick = del (this)> </td> </tbody> </body> </html> </html> </html> สคริปต์> ฟังก์ชั่นเพิ่ม () {var trobj = document .Createlement (TR); > </td> <td> <อินพุต type = 'ปุ่ม' value = 'เพิ่ม' onclick = 'เพิ่ม ()'> <อินพุต type = 'button' value = 'del' onclick = 'del (this)'> < /td>; document.getElementById (tb) .AppndChild (trobj);} ฟังก์ชั่น del (obj) {var trum = obj.parentnode.parentNode .Id; .ในรหัสข้างต้นตารางถูกสร้างขึ้นเป็นครั้งแรกในร่างกาย
มีสามคอลัมน์ในตัวอย่างคอลัมน์แรกของชื่อแรกคอลัมน์ที่สองนามสกุลและคอลัมน์ที่สามเป็นคอลัมน์การทำงาน
คอลัมน์การดำเนินการมีสองการดำเนินการหนึ่งคือการเพิ่มบรรทัดลงในแบบฟอร์มและอีกอันคือการลบบรรทัดปัจจุบัน การดำเนินการของสายการเพิ่มและการลบจะเชื่อมโยงกับสองปุ่มและเมื่อมีการคลิกปุ่มการทำงานของแถวเพิ่ม/ ลบที่สอดคล้องกันจะถูกเรียกใช้
วิธีการเพิ่ม ฟังก์ชันเพิ่ม () {var trobj = document.createlement (tr); <input name = 'LastName'/> </td> <td> <input type = 'ปุ่ม' value = 'เพิ่ม' onClick = 'เพิ่ม ()'> <อินพุต type = 'value =' del 'onClick =' del (นี่) '> </td>;บรรทัดแรกคือการสร้างองค์ประกอบ TR นั่นคือเพื่อสร้างสายตาราง
ในบรรทัดที่สอง trObj.id = new Date().getTime();
บรรทัดที่สาม trObj.innerHTML = <td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>
<input type='button' value='Del' onclick='del(this)'></td> ; ผ่านแอตทริบิวต์ InnerHTMML
บรรทัดที่สี่, document.getElementById(tb).appendChild(trObj);
ฟังก์ชั่น del (obj) {var trum = obj.parentnode.parentnode.id;พารามิเตอร์ถูกถ่ายทอดในวิธีการลบ สถานที่นี้อยู่ที่ไหน
ในบรรทัดแรก var trId = obj.parentNode.parentNode.id ;
ในบรรทัดที่สอง var trObj = document.getElementById(trId);
ในบรรทัดที่สาม, document.getElementById(tb).removeChild(trObj);
โดยทั่วไปแล้วรหัสข้างต้นจะตระหนักถึงฟังก์ชั่นของการเพิ่มขึ้นของมิเตอร์และบรรทัดการลบ แต่มีข้อบกพร่องในรหัส
1 ตารางที่ 1 ก่อนและหลังการเพิ่มขึ้นความกว้างของตารางเปลี่ยนไป
เพิ่มขึ้น
เพิ่มขึ้น
หลังจากการเพิ่มขึ้นรูปแบบของแบบฟอร์มจะกว้างขึ้น
2 หน้าเริ่มต้นของเบราว์เซอร์เป็นภาษาจีนปรากฏเป็นภาษาจีน
คุณต้องตั้งค่าการเข้ารหัสอักขระเพื่อแก้ไขรูปแบบการเข้ารหัสหน้าก่อนที่จะสามารถแสดงได้ตามปกติ