تصف هذه المقالة كيف تنفذ JS إضافة ديناميكية وحذف وتحديث الجداول. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> عملية الجدول </title>
<type type = "text/css">
جسم {
حجم الخط: 13px ؛
رفع الخط: 25 بكسل ؛
}
طاولة {
أعلى الحدود: 1 بكسل Solid #333 ؛
Border-Bottom: 1px Solid #333 ؛
العرض: 300 بكسل ؛
}
td {
اليمين الحدودي: 1 بكسل Solid #333 ؛
Border-Bottom: 1px Solid #333 ؛
}
.عنوان {
محاذاة النص: المركز ؛
خط الرصيف: جريئة ؛
الخلفية: #CCC ؛
}
.مركز {
محاذاة النص: المركز ؛
}
#displayinfo {
اللون: أحمر.
}
</style>
<script type = "text/javaScript">
وظيفة addRow () {// إضافة سطر واحد
var tableObj = document.getElementById ('mytable') ؛
var rownums = tableObj.Rows.Length ؛
var newRow = tableObj.InserTrow (rownums) ؛
var col1 = newRow.insertcell (0) ؛
col1.innerhtml = "السعادة تقع من السماء" ؛
var col2 = newRow.insertcell (1) ؛
col2.innerhtml = "$ 18.5" ؛
col2.align = "المركز" ؛
var divinfo = document.getElementById ('displayInfo') ؛
divinfo.innerhtml = "إضافة المنتج بنجاح" ؛
}
وظيفة delrow () {// حذف السطر الثاني
document.getElementById ('mytable'). deleterow (1) ؛
var divinfo = document.getElementById ('displayInfo') ؛
divinfo.innerhtml = "حذف المنتج بنجاح" ؛
}
وظيفة updaterow () {// تحديث معلومات سطر
var urow = document.getElementById ('mytable'). الصفوف [0] ؛
urow.className = "title" ؛
}
</script>
</head>
<body>
<table cellpadding = "0" cellpacing = "0" id = "mytable">
<tr id = "row1">
<td> عنوان الكتاب </td>
<td> السعر </td>
</r>
<tr id = "row2">
<td> الغرفة مع مناظر </td>
<td> $ 30.00 </td>
</r>
<tr id = "row3">
<td> 60 لحظة </td>
<td> $ 32.00 </td>
</r>
</table>
<input name = "b1" type = "button" value = "إضافة سطر واحد" onClick = "javaScript: addRow () ؛" /> <br />
<input name = "b2" type = "button" value = "حذف السطر الثاني" onClick = "javaScript: delRow () ؛" /> <br />
<name input = "b3" type = "button" value = "modify title" onClick = "javaScript: updaterow () ؛" /> <br />
<div id = "displayInfo"> </viv>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.