생식 사진 :
암호:
JS는 테이블 data_2.html을 동적으로 추가합니다
코드 사본은 다음과 같습니다.
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 insertrow 및 insertcell 메소드를 사용하여 테이블 데이터 _2 구현을 동적으로 추가합니다 </title>
<script type = "text/javaScript">
var mailarr = [
{ "title": "A C# 문제", "이름": "Zhang San", "Date": "2014-03-21"},
{ "title": "javaScript 문제", "이름": "li si", "date": "2014-03-21"},
{ "title": "a c question", "name": "55", "date": "2014-03-21"},
{ "title": "A C ++ 질문", "이름": "Zhao Liu", "Date": "2014-03-21"}
];
var tab = null;
Window.onload = function () {
loadTab ();
// 모두를 선택하십시오
document.getElementById ( "sela"). onclick = function () {
if (document.getElementById ( "sela"). checked == true) {
셀렉트 (Tab, True);
} 또 다른 {
reall (탭, 거짓);
}
};
// 선택한 모든 것을 삭제합니다
document.getElementById ( "delsel"). onclick = function () {
// 모든 입력 컨트롤을 전송합니다 (선택된 마지막 확인란 제외)
var chks = document.getElementsByTagName ( 'input');
for (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 () {
탭 = document.getElementById ( "TB");
// tr의 테이블에 mailarr loop traversal 메소드 추가
for (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 = "<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;
}
}
// 모든 버튼 선택을 발효하려면 테이블의 모든 행을 가로 질러야합니다.
함수 reall (mailtab, issel) {
for (var i = 0; i <mailtab.rows.length; i ++) {
var tr = mailtab.rows [i];
tr.cells [0] .ChildNodes [0] .Checked = issel;
}
}
</스크립트>
</head>
<body>
<table id = "tb"style = "Border-Collapse : Collapse;">
<tr>
<th> 시퀀스 </th>
<th> 제목 </th>
<th> 메일러 보내기 </th>
<th> 시간 보내기 </th>
</tr>
<!-루프 증가->
<!-모든 것을 선택하십시오->
<tr>
<td colspan = "4">
<input id = "sela"type = "checkbox" /> <label for = "sela"> all < /label>을 선택하십시오
<a href = "#"id = "delsel"> delete </a> </td>
</tr>
</테이블>
</body>
</html>