ภาพการทำซ้ำ:
รหัส:
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 เพิ่มการใช้งาน Table_2 แบบไดนามิกโดยใช้ InserTrow และ InsertCell Methods </title>
<script type = "text/javascript">
var mailarr = [
{"title": "A C# ปัญหา", "Name": "Zhang San", "Date": "2014-03-21"}
{"title": "ปัญหา JavaScript", "Name": "Li Si", "Date": "2014-03-21"},
{"title": "A C คำถาม", "ชื่อ": "55", "วันที่": "2014-03-21"},
{"title": "คำถาม A C ++", "Name": "Zhao Liu", "Date": "2014-03-21"}
-
var tab = null;
window.onload = function () {
loadtab ();
// เลือกทั้งหมด
document.getElementById ("sela"). onclick = function () {
if (document.getElementById ("sela") ตรวจสอบ == true) {
Seleall (แท็บ, จริง);
} อื่น {
Seleall (แท็บ, เท็จ);
-
-
// ลบทั้งหมดที่เลือก
document.getElementById ("delsel"). onclick = function () {
// โอนการควบคุมอินพุตทั้งหมด (ยกเว้นช่องทำเครื่องหมายสุดท้ายที่เลือก)
var chks = document.getElementsByTagname ('อินพุต');
สำหรับ (var i = chks.length-2; i> = 0; i--) {
var chk = chks [i];
if (chk.checked == true) {
// เลือกการประมวลผลการลบแถว
var rownow = chk.parentNode.parentNode;
Rownow.parentNode.removeChild (Rowsow);
} อื่น {
การแจ้งเตือน ("จริงๆ");
-
-
-
-
ฟังก์ชัน loadtab () {
tab = document.getElementById ("tb");
// เพิ่มเมธอด Mailarr Loop Traversal ไปยังตารางใน TR
สำหรับ (var rowindex = 0; rowindex <mailarr.length; rowindex ++) {
// var tr = tab.insertrow (-1); //-1 หมายถึงบรรทัดสุดท้าย
var tr = tab.insertrow (tab.rows.length - 1); // แทรกลงในสองบรรทัดสุดท้ายและบรรทัดสุดท้ายควรถูกเก็บไว้สำหรับบรรทัดที่เลือกทั้งหมด
var td1 = tr.insertcell (-1);
td1.innerhtml = "<อินพุตประเภท = 'ช่องทำเครื่องหมาย'/>";
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;
-
-
// ในการทำให้ปุ่มเลือกทั้งหมดมีผลคุณต้องสำรวจแถวทั้งหมดของตารางทั้งหมด
ฟังก์ชั่น 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 = "การล่มสลายของชายแดน: ยุบ;">
<tr>
<th> ลำดับ </th>
<th> ชื่อเรื่อง </th>
<th> ส่งจดหมาย </th>
<th> ส่งเวลา </th>
</tr>
<!-ลูปเพิ่มขึ้น->
<!-เลือกทั้งหมด->
<tr>
<td colspan = "4">
<อินพุต id = "sela" type = "ช่องทำเครื่องหมาย" /> <label for = "sela"> เลือกทั้งหมด < /label>
<a href = "#" id = "delsel"> ลบ </a> </td>
</tr>
</table>
</body>
</html>