في تطوير التطبيق ، بعض معلومات الإدخال ديناميكية ، مثل تجربة العمل التي نريد تسجيل موظف ، مثل الشكل التالي
إذا تم تحويله إلى طريق مسدود ، يمكنك ملء ثلاثة فقط ، ماذا لو كان أربعة؟ أو أكثر ، أليس من المستحيل إضافته؟ لذلك هذا ليس جيدًا ، يمكننا إضافة صفوف الجدول ديناميكيًا ، كما هو موضح في الشكل أدناه ، إضافة صف وإدخال صف من المعلومات ، وهو أكثر مرونة
دعونا نلقي نظرة على كيفية الجمع بين JavaScript في ASP و ASP.NET لتحقيق هذا التأثير:
بادئ ذي بدء ، يتم تنفيذ الجداول إضافة ديناميكية في المقدمة. عندما تتوفر المحطة التالية ، قد يكون ذلك ممكنًا ، ولكن قد يتم استخدام Ajax ، وهو أمر مزعج للغاية ، لذلك من الأفضل استخدام JavaScript لتنفيذها. فيما يلي طريقتان لإضافة صفوف الجدول ديناميكيًا:
النوع الأول: رمز المصدر
جافا سكريبت:
<script type = "text/javaScript">/** // * يتم استخدام هذه الوظيفة لإضافة صف واحد ديناميكيًا * TabObj: Target Table * Colnum: عدد الأعمدة التي يتمتع بها صف في الجدول * sorpos: مصدر الصف الجديد. * targpos: الموضع الذي سيتم فيه إضافة الصف الجديد. * */ function 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 من الصف المعين if (colnum == 0 || colnum == undefined || colnum == isnan) {colnum = tabObj.Rows [0] .Cells.Length ؛ } var ntd = new array () ؛ // إنشاء صفيف TDS جديد لـ (var i = 0 ؛ i <colnum ؛ i ++) {// traverl tds in row ntd [i] = ntr.insertcell () ؛ // إنشاء خلية جديدة ntd [i] .id = tds [0] .id ؛ // انسخ معرف TD إلى خلية جديدة. | انتباه! يجب تعيين TDS's // لاحقة NTD [i] .innerhtml = tds [i] .innerhtml ؛ // انسخ معرف TD إلى خلية جديدة. | انتباه! يجب تعيين TDS's // لاحقة NTD [i] .innerhtml = tds [i] .innerhtml ؛ // انسخ القيمة في NTD [i] innerhtml من TDS المقابلة}}/** // * يتم استخدام هذه الوظيفة لإزالة الصف المعين في الجدول المعين * TabObj: الجدول المعين * targpos: موضع الصف الهدف * btnobj: حاليًا تم إزالته */الوظيفة deletow (tabobj ، targpos ، btnobj ؛ i <tabObj.Rows.length ؛ i ++) {if (tabObj.getElementsByTagName ('img') [i] == btnobj) {tabObj.deleterow (i+targpos) ؛ }}}} </script>HTML
<table id = tabUserInfo border = 1> <tr> <td> name </td> <td> الجنس </td> <td> العمر </td> > </td> <td id = tduserInfo> <input id = usersex name = usersex> </td> <td id = tduserInfo> <input onClick = "deLeterow (document.all.tabuserinfo ، 1 ، this)"> </td> </tr> <tr> <td> <type type = button value = "add" onClick = "addRow (document.all.tabuserinf ، null ، 1،1)