لا أقول الكثير من الهراء ، سأقوم بنشر الكود مباشرة.
<html> <head> <title> جدول </title> </head> <body> <table border = 1> <thead> <td> الاسم الأول </td> الاسم الأخير </td> <td> <////////////.6 td> </tr> <thead> <tbody id = tb> <l id = 1st> </td> <td> three </td> <td> <type type = button value = add onClick = add ()> <type type = button value = del onClick = del (this)> </td> </tbody> </body> </html> </html> </html> script> function add () {var trobj = document . > </td> <td> <input type = 'button' value = 'add' onClick = 'add ()'> <input type = 'button' value = 'del' onClick = 'del (this)'> < /td> ؛ . Removechild (trObj);} </script>في الكود أعلاه ، يتم بناء الجدول لأول مرة في الجسم.
هناك ثلاثة أعمدة في المثال ، والعمود الأول من الاسم الأول ، والاسم الأخير للعمود الثاني ، والعمود الثالث كعمود للتشغيل.
يحتوي عمود التشغيل على عمليتين ، أحدهما هو إضافة خط إلى النموذج ، والآخر هو حذف الخط الحالي. يتم ربط عمليات خطوط الإضافة والحذف بزرين ، وعندما يتم النقر فوق الزر ، يتم تشغيل عملية الإضافة/ الحذف المقابلة.
طريقة إضافة إضافة () {var trobj = document.createelement ( <input name = 'lastName'/> </td> <td> <type type = 'button' value = 'add' onClick = 'add ()'> <input type = 'value =' del 'onClick =' del 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 تظهر الصفحة الافتراضية للمتصفح باللغة الصينية
تحتاج إلى تعيين ترميز الحرف لتعديل تنسيق ترميز الصفحة قبل عرضه بشكل طبيعي