هناك عدة صفوف في الجدول: var trcnt = table.rows.length ؛ (الجدول هو معرف)
كم عدد الأعمدة الموجودة لكل صف: لـ (var i = 0 ؛ i <trcnt ؛ i ++)
table.rows [i] .cells.length ؛
جدول تشغيل JavaScript:
insertrow () ، deleterow () ، insertcell () ، deletecell () طرق
table.insertrow () على ما يرام تحت IE ، ولكن في Firefox ، يجب تغييره إلى Table.insertrow (-1)
وبالمثل ، يجب أيضًا تغيير insertcell () المقابل إلى إدراج (-1)
طريقة insertrow ()
التعريف والاستخدام
يتم استخدام طريقة insertrow () لإدراج صف جديد في موضع محدد في الجدول.
قواعد
TableObject.InserTrow (فهرس)
قيمة الإرجاع
إرجاع TableRow ، مما يشير إلى الصف الذي تم إدراجه حديثًا.
يوضح
تقوم هذه الطريقة بإنشاء كائن Tablerow جديد ، ويمثل علامة <tr> جديدة ، ويقوم بإدراجها في الموضع المحدد في الجدول.
سيتم إدراج الخط الجديد قبل خط الفهرس. إذا كان الفهرس يساوي عدد الصفوف في الجدول ، فسيتم إلحاق الصف الجديد حتى نهاية الجدول.
إذا كان الجدول فارغًا ، فسيتم إدراج الصف الجديد في فئة <Tbody> جديدة ، والتي سيتم إدراجها في الجدول نفسه.
رمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عدد الصفوف في الجدول ، فسترمي هذه الطريقة استثناء Domexception مع رمز index_size_err.
مثال
نسخة الكود كما يلي:
<html>
<head>
<script type = "text/javaScript">
وظيفة insrow ()
{
document.getElementByid ('mytable'). inserTrow (0)
}
< /script>
</head>
<body>
<جدول المعرف = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</r>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
</r>
< /table>
<br />
<type type = "button" onClick = "InsRow ()"
value = "أدخل صف جديد">
< /body>
</html>
DELETECELL ()
التعريف والاستخدام
يتم استخدام طريقة DELETECELL () لحذف الخلايا (<td> عناصر) في صف الجدول.
قواعد
TableRowObject.deletecell (فهرس)
يوضح
فهرس المعلمة هو موضع عنصر الجدول المراد حذفه في الصف.
تحذف هذه الطريقة عناصر الجدول في الموضع المحدد في صف الجدول.
رمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عنصر الجدول في الصف ، فستقوم هذه الطريقة بإلقاء استثناء Domexception مع Code index_size_err.
مثال
نسخة الكود كما يلي:
<html>
<head>
<script type = "text/javaScript">
وظيفة delrow ()
{
document.getElementById ('mytable'). deleterow (0)
}
< /script>
</head>
<body>
<جدول المعرف = "mytable">
<tr>
<td> row1 cell1 </td>
<td> row1 cell2 </td>
</r>
<tr>
<td> row2 cell1 </td>
<td> row2 cell2 </td>
</r>
< /table>
<br />
<type type = "button" onClick = "delRow ()"
Value = "Delete First Row">
< /body>
</html>
insertcell ()
التعريف والاستخدام
يتم استخدام طريقة insertcell () لإدخال عنصر فارغ <td> في الموضع المحدد للصف في جدول HTML.
قواعد
TableRowObject.insertcell (فهرس)
قيمة الإرجاع
كائن TableCell يمثل عنصرًا تم إنشاؤه حديثًا وإدراجه <td>.
يوضح
ستقوم هذه الطريقة بإنشاء عنصر <td> جديد وإدخاله في الموضع المحدد في الصف. سيتم إدخال الخلية الجديدة قبل عنصر الجدول الموجود حاليًا في الموضع المحدد في الفهرس. إذا كان الفهرس مساوياً لعدد الخلايا في الصف ، يتم إلحاق الخلية الجديدة في نهاية الصف.
لاحظ أن هذه الطريقة يمكنها فقط إدراج عناصر جدول البيانات <td>. إذا كنت بحاجة إلى إضافة عناصر رأس إلى صف ، فيجب عليك إنشاء عنصر <h> باستخدام طريقة المستند.
رمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عنصر الجدول في الصف ، فستقوم هذه الطريقة بإلقاء استثناء Domexception مع Code index_size_err.
مثال
نسخة الكود كما يلي:
<html>
<head>
<script type = "text/javaScript">
وظيفة inscell ()
{
var x = document.getElementById ('tr2'). insertcell (0)
x.innerhtml = "جون"
}
< /script>
</head>
<body>
<griding>
<tr id = "tr1">
<h> FirstName </h>
<th> lastName </th>
</r>
<tr id = "tr2">
<td> بيتر </td>
<td> Griffin </td>
</r>
< /table>
<br />
<type type = "button" onClick = "inscell ()" value = "insert cell">
< /body>
</html>
DELETECELL ()
التعريف والاستخدام
يتم استخدام طريقة DELETECELL () لحذف الخلايا (<td> عناصر) في صف الجدول.
قواعد
TableRowObject.deletecell (فهرس)
يوضح
فهرس المعلمة هو موضع عنصر الجدول المراد حذفه في الصف.
تحذف هذه الطريقة عناصر الجدول في الموضع المحدد في صف الجدول.
رمي
إذا كان فهرس المعلمة أقل من 0 أو أكبر من أو يساوي عنصر الجدول في الصف ، فستقوم هذه الطريقة بإلقاء استثناء Domexception مع Code index_size_err.
مثال
نسخة الكود كما يلي:
<html>
<head>
<script type = "text/javaScript">
وظيفة delcell ()
{
document.getElementById ('tr2'). deletecell (0)
}
< /script>
</head>
<body>
<griding>
<tr id = "tr1">
<h> FirstName </h>
<th> lastName </th>
</r>
<tr id = "tr2">
<td> بيتر </td>
<td> Griffin </td>
</r>
< /table>
<br />
<type type = "button" onClick = "delcell ()" value = "delete cell">
< /body>
</html>
التطبيقات في المشروع:
نسخة الكود كما يلي:
<script type = "text/javaScript">
var trindex = 0 ؛
// زيادة الصف ديناميكي
unction appendConvert () {
// var sel = document.getElementById ("selectConvertName") ؛
var sel = document.getElementSbyName ("selectConvertName") [0] ؛
var classname ؛
if (null! = sel) {
لـ (var i = 0 ؛ i <sel.options.length ؛ i ++) {
if (sel.options [i]. selected)
className = sel.options [i] .value ؛
}
}
// تأتي البيانات من نموذج Ajax ، JSON.
convert.getConvertBean2Json (classname ،
وظيفة (نتيجة) {
var obj = eval ('('+result+')') ؛
var table = document.getElementById ("converttable") ؛
var newRow = table.inserTrow (trindex+1) ؛
newRow.InsertCell (0) .innerhtml = obj.name+"<input type = 'button' value = 'delete' onClick = 'deleterow (this)'>" ؛
newRow.InsertCell (1) .innerhtml = "<input type = 'text' name = ''+trindex+"]. id '> <input type =' hidden 'name =' senderlist ["+trindex+"]
if (null! = obj.paramlist) {
var paramstr = "" ؛
لـ (var i = 0 ؛ i <obj.paramlist.length ؛ i ++) {
paramstr = paramstr+
"اسم المعلمة:"+obj.paramlist [i] .name+
"؛ نوع المعلمة:"+obj.paramlist [i] .type+
"؛ قيمة المعلمة: <input name = 'senderlist ["+trindex+"]. paramlist ["+i+"]
"<type type = 'hidden' name = 'senderlist ["+trindex+"]. paramlist ["+i+"]
"<type type = 'hidden' name = 'senderlist ["+trindex+"]. paramlist ["+i+"]
}
newRow.insertcell (2) .innerhtml = paramstr ؛
}
Trindex ++ ؛
}) ؛
}
// حذف الخط
على DeLeterow (r) {
var i = r.parentnode.parentNode.RowIndex ؛
document.getElementById ('converttable'). deleterow (i) ؛
trindex-- ؛
}
</script>