كيفية إنشاء جدول في جافا سكريبت (طريقتان لرسم جدول في جافا سكريبت)

1. وظائف InsertRow() وinsertCell()

يمكن أن تأخذ الدالة InsertRow() معلمات بالشكل التالي:

InsertRow(index): يبدأ الفهرس من 0

تضيف هذه الدالة صفًا جديدًا قبل صف الفهرس، مثل InsertRow(0)، الذي يضيف صفًا جديدًا قبل الصف الأول. الدالة الإدراج ()insertRow تعادل وظيفة الإدراج (-1) التي تضيف صفًا جديدًا إلى نهاية الجدول. بشكل عام، عندما نستخدمه: objTable.insertRow(objTable.rows.length) فهو لإضافة صف جديد في نهاية الجدول objTable.

استخدام InsertCell() وinsertRow هو نفسه ولن تتم مناقشته هنا.

2.deleteRow () وdeleteCell () أساليب

يمكن أن تأخذ وظيفة حذف الصف () المعلمات، ويكون النموذج كما يلي: حذف الصف (الفهرس): يبدأ الفهرس من 0

نفس معنى الطريقتين أعلاه هو حذف الصفوف والخلايا في الموضع المحدد. المعلمات التي سيتم تمريرها: الفهرس هو موضع الصف في الجدول ويمكن الحصول عليه بالطريقة التالية ثم حذفه:

انسخ رمز الكود كما يلي:

varrow=document.getElementById("معرف الصف");

var Index=row.rowIndex;// هناك هذه السمة، الكالينجيون

objTable.deleteRow(index);

دعني أخبرك عن مشكلة واجهتها أثناء الاستخدام عند حذف صفوف في جدول، إذا قمت بحذف صف معين، فسيتغير عدد الصفوف في الجدول على الفور، لذلك إذا كنت تريد حذف جميع الصفوف في الجدول، فإن الكود التالي خاطئ:

انسخ رمز الكود كما يلي:

وظيفة كلير رو () {

objTable= document.getElementById("myTable");

for( var i=1; i<objTable.rows.length ; i++ )

{

tblObj.deleteRow(i);

}

}

يريد هذا الرمز حذف نص الجدول الأصلي. هناك مشكلتان. أولًا، لا يمكن أن يكونdeleteRow(i)، بل يجب أن يكونdeleteRow(1). لأنه عند حذف صفوف الجدول، يتغير عدد الصفوف في الجدول، وهذا هو مفتاح المشكلة. طول الصفوف يصبح أصغر دائمًا، ويكون عدد الصفوف المحذوفة دائمًا أقل من نصف ما هو متوقع. احذف الجدول بشكل صحيح، ويجب أن يبدو سطر التعليمات البرمجية كما يلي:

انسخ رمز الكود كما يلي:

وظيفة كلير رو () {

objTable= document.getElementById("myTable");

var length= objTable.rows.length;

ل(فار ط = 1؛ أنا <الطول؛ أنا ++)

{

objTable.deleteRow(i);

}

}

3. قم بتعيين خصائص الخلايا والصفوف ديناميكيًا

أ. استخدم الأسلوب setAttribute() بالتنسيق التالي: setAttribute(attribute, attribute value)

ملاحظة: يمكن استخدام هذه الطريقة لجميع كائنات DOM تقريبًا، المعلمة الأولى هي اسم السمة، على سبيل المثال: border، والمعلمة الثانية هي القيمة التي تريد تعيينها للحد، على سبيل المثال: 1.

انسخ رمز الكود كما يلي:

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);// اضبط الحد على 1 للجدول

بالنسبة لأشياء أخرى، على سبيل المثال، إذا كنت تريد تعيين ارتفاع TD، فأنت بحاجة أيضًا إلى الحصول على كائن TD أولاً، ثم استخدام طريقة setAttribute().

انسخ رمز الكود كما يلي:

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);// اضبط ارتفاع الخلية على 24

لقد واجهت مشكلة في تعيين الأنماط عند استخدامه. لا يمكنك استخدام setAttribute("class"،"inputbox2")؛ بدلاً من ذلك، يجب عليك استخدام setAttribute("className"، "inputbox2"). ، بعض السمات لا تتفق مع ما لدينا في DW، هاها، دعونا نستكشفها بأنفسنا.

ب- التكليف المباشر

انسخ رمز الكود كما يلي:

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;// اضبط الحد على 1 للجدول

وهذه الطريقة تنطبق على الجميع ههههههههههههههههههههههههههه

4. قم بإنشاء جدول

بمجرد فهم إضافة وحذف الصفوف <tr> والخلايا <td>، يمكنك إنشاء جدول.

الخطوة 1: يجب أن يكون لديك جدول تريد تغييره ديناميكيًا. ما أتحدث عنه هنا هو جدول موجود بالفعل في الصفحة. نحتاج إلى تعيين معرف: myTable.

انسخ رمز الكود كما يلي:

var objMyTable = document.getElementById("myTable");

الخطوة 2: إنشاء كائنات الصفوف والأعمدة

انسخ رمز الكود كما يلي:

فار فهرس = objMyTable.rows.length-1;

var nextRow = objMyTable.insertRow(index);// تتم إضافة الصفوف المراد إضافتها من الصف الثاني إلى الصف الأخير.

// رقم صندوق الخلية

var newCellCartonNo = nextRow.insertCell();

varcartonNoName = "IptCartonNo";

newCellCartonNo.innerHTML = "<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";

newCellCartonNo.setAttribute("className"،"tablerdd")؛

هذا كل شيء، يمكنك ببساطة إنشاء صف وعمود. لقد قمت بنشر الكود المحدد أدناه. إنه مجرد مثال بسيط جدًا، ولكن ربما تكون الطريقة المذكورة أعلاه هاها، فلنستكشفها ببطء ~

انسخ رمز الكود كما يلي:

<!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=gb2312" />

<title>بلو راي-بلو شاين</title>

<لغة البرمجة = "جافا سكريبت">

فار Count=false,NO=1;

وظيفة إضافة الصف () {

العد=!العد;

// أضف صفًا

var newTr = testTbl.insertRow(testTbl.rows.length);

// أضف عمودين

var newTd0 = newTr.insertCell();

var newTd1 = newTr.insertCell();

var newTd2 = newTr.insertCell();

// قم بتعيين محتوى العمود وسماته

إذا(العدد){newTr.style.background="#FFE1FF";}

آخر {newTr.style.background="#FFEFD5";}

newTd0.innerHTML = '<نوع الإدخال=معرف مربع الاختيار='box4'>';

لا++

newTd1.innerText="السطر "+ NO+";

}

</script>

</الرأس>

<الجسم>

<حدود الجدول = 0 تباعد الخلايا = "1" معرف = "testTbl" نمط = "حجم الخط: 14px؛" >

<tr bgcolor="#FFEFD5">

<td width=6%><نوع الإدخال=معرف مربع الاختيار = "box1"></td>

<td>السطر 1</td>

<td> </td>

</tr>

</الجدول>

<التسمية>

<input type = "button" value = "إدراج صف" عند النقر = "addRow ()" />

</التسمية>

</الجسم>

</html>

5. طريقة إلحاق الطفل ().

انسخ رمز الكود كما يلي:

<أتش تي أم أل>

<الرأس>

<title>صفحتي التجريبية</title>

<نوع البرنامج النصي = "نص/جافا سكريبت">

<!--

فار نص رقم = 1؛

وظيفة addTextBox(form, afterElement) {

// زيادة رقم مربع النص

textNumber++;

// أنشئ التسمية

var label = document.createElement("label");

// أنشئ مربع النص

var textField = document.createElement("input");

textField.setAttribute("type"،"text");

textField.setAttribute("name"،"txt"+textNumber);

textField.setAttribute("id"،"txt"+textNumber)؛

// أضف نص التسمية

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// ضع مربع النص بداخله

label.appendChild(textField);

// أضف كل شيء إلى النموذج

form.insertBefore(label,afterElement);

عودة كاذبة.

}

وظيفة إزالة النص (النموذج) {

if (textNumber > 1) { // إذا كان هناك أكثر من مربع نص واحد

// قم بإزالة آخر ما تمت إضافته

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

رقم النص--;

}

}

//-->

</script>

<نمط النوع = "نص/CSS">

<!--

ملصق {

عرض:كتلة؛

الهامش: .25em 0em؛

}

-->

</نمط>

</الرأس>

<الجسم>

<form id="myForm"method="get" action="./" />

<label>مربع النص رقم 1: <input type="text" name="txt1" id="txt1" /></label>

<ص>

<input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />

<input type = "button" value = "إزالة مربع النص" عند النقر = "removeTextBox (this.form)" />

</ص>

<p><input type="Submit" value="Submit" /></p>

</النموذج>

</الجسم>

</html>

<أتش تي أم أل>

<الرأس>

<title>صفحتي التجريبية</title>

<نوع البرنامج النصي = "نص/جافا سكريبت">

<!--

فار نص رقم = 1؛

وظيفة addTextBox(form, afterElement) {

// زيادة رقم مربع النص

textNumber++;

// أنشئ التسمية

var label = document.createElement("label");

// أنشئ مربع النص

var textField = document.createElement("input");

textField.setAttribute("type"،"text");

textField.setAttribute("name"،"txt"+textNumber);

textField.setAttribute("id"،"txt"+textNumber)؛

// أضف نص التسمية

label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));

// ضع مربع النص بداخله

label.appendChild(textField);

// أضف كل شيء إلى النموذج

form.insertBefore(label,afterElement);

عودة كاذبة.

}

وظيفة إزالة النص (النموذج) {

if (textNumber > 1) { // إذا كان هناك أكثر من مربع نص واحد

// قم بإزالة آخر ما تمت إضافته

form.removeChild(document.getElementById("txt"+textNumber).parentNode);

رقم النص--;

}

}

//-->

</script>

<نمط النوع = "نص/CSS">

<!--

ملصق {

عرض:كتلة؛

الهامش: .25em 0em؛

}

-->

</نمط>

</الرأس>

<الجسم>

<form id="myForm"method="get" action="./" />

<label>مربع النص رقم 1: <input type="text" name="txt1" id="txt1" /></label>

<ص>

<input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />

<input type = "button" value = "إزالة مربع النص" عند النقر = "removeTextBox (this.form)" />

</ص>

<p><input type="Submit" value="Submit" /></p>

</النموذج>

</الجسم>

</html>