صورة التكاثر:
شفرة:
JS إضافة ديناميكي Data_2.html
نسخة الكود كما يلي:
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> JS يضيف بشكل ديناميكي تطبيق Data_2 باستخدام طرق insertrow و insertcell </title>
<script type = "text/javaScript">
var mailarr = [
{"العنوان": "A C# مشكلة" ، "اسم": "Zhang San" ، "Date": "2014-03-21"} ،
{"title": "A JavaScript Problem" ، "Name": "Li Si" ، "Date": "2014-03-21"} ،
{"العنوان": "A C Question" ، "Name": "55" ، "Date": "2014-03-21"} ،
{"title": "A C ++ Question" ، "Name": "Zhao Liu" ، "Date": "2014-03-21"}
] ؛
var tab = null ؛
window.onload = function () {
loadtab () ؛
// حدد الكل
document.getElementById ("sela"). onClick = function () {
if (document.getElementById ("sela"). فحص == صحيح) {
Seleall (علامة التبويب ، صواب) ؛
} آخر {
Seleall (علامة التبويب ، خطأ) ؛
}
} ؛
// حذف جميع المحدد
document.getElementById ("delsel"). onClick = function () {
// نقل جميع عناصر التحكم في الإدخال (باستثناء مربع الاختيار الأخير الذي تم تحديده)
var chks = document.getElementsByTagName ('input') ؛
لـ (var i = chks.length-2 ؛ i> = 0 ؛ i--) {
var chk = chks [i] ؛
if (chk.checked == true) {
// حدد معالجة حذف الصف
var rownow = chk.parentnode.parentNode ؛
rownow.parentnode.removechild (Rownow) ؛
} آخر {
تنبيه ("حقا") ؛
}
}
} ؛
} ؛
وظيفة loadtab () {
tab = document.getElementById ("tb") ؛
// إضافة طريقة اجتياز حلقة Mailarr إلى الجدول في TR
لـ (var rowindex = 0 ؛ rowindex <mailarr.length ؛ rowindex ++) {
// var tr = tab.insertrow (-1) ؛ //-1 يشير إلى السطر الأخير
var tr = tab.inserTrow (tab.rows.length - 1) ؛ // insert في آخر سطرين ، ويجب الاحتفاظ بالسطر الأخير للخط الذي يتم تحديده الكل.
var td1 = tr.insertcell (-1) ؛
td1.innerhtml = "<input type = 'checkbox'/>" ؛
var td2 = tr.insertcell (-1) ؛
td2.innerhtml = mailArr [rowindex] .title ؛
var td3 = tr.insertcell (-1) ؛
td3.innerhtml = mailArr [rowindex] .name ؛
var td4 = tr.insertcell (-1) ؛
td4.innerhtml = mailarr [rowindex] .date ؛
}
}
// لجعل الزر SELECT ALL يسري ، تحتاج إلى اجتياز جميع صفوف الجدول
وظيفة SELEALL (Mailtab ، ISSEL) {
لـ (var i = 0 ؛ i <mailtab.rows.length ؛ i ++) {
var tr = mailtab.rows [i] ؛
tr.cells [0] .ChildNodes [0]. checked = issel ؛
}
}
</script>
</head>
<body>
<table id = "tb" style = "collapse الحدود: الانهيار ؛">
<tr>
<h> التسلسل </th>
<th> العنوان </th>
<th> أرسل mailer </h>
<th> إرسال الوقت </th>
</r>
<!-زيادة الحلقة->
<!-حدد الكل->
<tr>
<td colspan = "4">
<input id = "sela" type = "checkbox" /> <label for = "sela"> حدد الكل < /label>
<a href = "#" id = "delsel"> حذف </a> </td>
</r>
</table>
</body>
</html>