لقد قرأت مؤخرًا ثلاثة كتب من O'Reilly، والتي نطلق عليها بشكل عام كتب الوحوش (اسم أحد زملائي يشبه اسمي كثيرًا، هههه)، وكنت أرغب دائمًا في عمل عينة لممارسة مهاراتي، لأن العديد من الشركات تستخدم النماذج الديناميكية، لذلك، حاولت استخدام JS لإنشاء نموذج ديناميكي، واستخدمت متصفح Firfox لتصحيحه، لأنه من الأفضل استخدام المكون الإضافي Firbug في الأصل، ولم أرغب في تنفيذ وظيفة صغيرة تريد أن تفعل الكثير، فقط انقر فوق الزر لإضافة صف، ثم تمت إضافة المزيد والمزيد، وأصبحت أكثر جمالا. انشر الكود المصدري حتى يتمكن الجميع من التعلم معًا. إذا كانت لديك أي أسئلة، فيمكنك تصحيحها. إذا كنت مبتدئًا في JS، فيرجى أن تكون رحيما.
ملاحظة: لا أعرف لماذا لم يتم عرض رقم السطر أعلاه، ولم أستخدمه لفترة طويلة. الملاحظات مكتوبة بوضوح ويمكن للجميع التعلم معًا.
انسخ رمز الكود كما يلي:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>الجدول الديناميكي</title>
<نمط النوع = "نص/CSS">
الجسم { لون الخلفية: # 9CC محاذاة النص: المركز}
الجدول { الهامش: 10 بكسل تلقائي؛}
tr th { الحدود: 1 بكسل صلب #096؛}
تد {الحدود: 1px الصلبة #096؛}
</نمط>
<نوع البرنامج النصي = "نص/جافا سكريبت">
/*يمكن الإعلان عن بعض المتغيرات فقط خارج الوظيفة، ولا يمكن استخدام أساليب التشغيل لأنه لا توجد وظيفة لاستدعائها وتنفيذها. */
// عند تحميل الصفحة، ضع مربع التحديد في رأس الجدول، لأنه يستخدم مرة واحدة
نافذة.onload = وظيفة () {
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var Childtd = firsttr.childNodes;
// أضف مربع تحديد إلى الصف والعمود الأول
var inp = document.createElement('input');
inp.type = 'مربع الاختيار';
// تسجيل حدث DOM من المستوى 2
CatchEvent(inp,'click',function(){ // سجل الوظيفة للحكم على الحالات المختلفة
إذا (inp.checked ==صحيح){
allSelect();
}آخر{
CancelSelect();
}
});
//catchEvent(inp,'click',allSelect);
//catchEvent(inp,'change',cancelSelect);
Childtd[0].appendChild(inp);
}
// أضف صفًا
//var count =0;//أضف عمودًا للعد
وظيفة إضافة الصف () {
//العدد++;
var tab = document.getElementById('tab');
var firsttr = document.getElementsByTagName('tr')[0];
var Childtd = firsttr.childNodes;
var tr = document.createElement('tr');
var artd = new Array();
var arrinp = new Array();
for(var i =0;i<childtd.length;i++){
artd[i] = document.createElement('td');
arrinp[i] = document.createElement('input');
إذا (ط == 0) {
arrinp[i].type = 'checkbox';
arrinp[i].name = 'selectbox';
}إلا إذا(i==1){
//arrinp[i] = document.createTextNode(count);
arrinp[i] = document.createTextNode('');
}
artd[i].appendChild(arrinp[i]);// فكر في سبب حاجة الإدخال أيضًا إلى إضافة مصفوفة.
tr.appendChild(arrtd[i]);
}
tab.appendChild(tr);
newSort();
}
//حذف العملية
وظيفة حذف الصف () {
varparentTr = new Array();// ضع الصفوف المحددة أولاً في مصفوفة
var box = document.getElementsByName('selectbox');
var tab = document.getElementById('tab');
for(var i = 0;i<box.length;i++){
إذا (مربع [i]. محدد == صحيح) {
varparent = box[i].parentNode;
parentTr[i] =parent.parentNode;// إذا تم وضعه مباشرة بالداخل، فلماذا لا يمكن حذفه بالكامل؟ ؟ هل بسبب عدم وجود استجابة كافية؟
//tab.removeChild(parentTr);
}
}
for(var i = 0;i<parentTr.length;i++){ // سيؤدي هذا إلى حذف جميع العناصر المحددة
if(parentTr[i]){ // هنا نحتاج أولاً إلى تحديد ما إذا كانت قيمة فارغة أم لا، وإلا فسيتم الإبلاغ عن خطأ.
tab.removeChild(parentTr[i]);
}
}
newSort();
}
// إذا تم الحذف، أعد الفرز
وظيفة فرز جديد () {
var text = new Array();
var Child_td = new Array();
var arr_tr = document.getElementsByTagName('tr');
for(var i = 1;i<arr_tr.length;i++){
Child_td[i] = arr_tr[i].childNodes[1];// احصل على جميع العقد في العمود الثاني بدءًا من الصف الثاني
إذا(child_td[i].childNodes[0]){
Child_td[i].removeChild(child_td[i].childNodes[0]);
}
text[i] = document.createTextNode(i);
Child_td[i].appendChild(text[i]);
}
}
// حدد كل العملية
وظيفة الكل حدد () {
var box = document.getElementsByName('selectbox');
for(var i= 0;i<box.length;i++){
box[i].checked = true;
}
}
// إلغاء جميع التحديدات
وظيفة إلغاء تحديد () {
var box = document.getElementsByName('selectbox');
for(var i = 0;i<box.length;i++){
إذا (مربع [i]. محدد == صحيح) {
box[i].checked =false;
}
}
}
// وظيفة تسجيل الحدث
دالة CatchEvent(eventobj,event,eventHandler){
إذا (eventobj.addEventListener){
eventsobj.addEventListener(event,eventHandler,false);
}else if(eventobj.attachEvent){
حدث = 'على'+حدث;
eventsobj.attachEvent(event,eventHandler);
}
}
//catchEvent(add,'click',addRow);
</script>
</الرأس>
<الجسم>
<h3>الجدول الديناميكي</h3>
<input type = "button" value = "Add" id = "add" onclick = "addRow ()" />
<input type = "button" value = "حدد الكل" عند النقر = "allSelect ()" />
<input type = "button" value = "إلغاء الكل" onclick = "cancelSelect ()" />
<input type = "button" value = "Delete" id = "delete" onclick = "deleteRow ()"/>
<معرف الجدول = "tab" cellpadding = "5px" تباعد الخلايا = "0px">
<tr><td></td><td>الرقم التسلسلي</td><td>السؤال الأول</td><td>السؤال الثاني</td><td>السؤال الثالث</td></tr>
</الجدول>
</الجسم>
</html></span>