複製写真:
コード:
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は、InsertrowとInsertCellメソッドを使用してテーブルデータ_2実装を動的に追加します</title>
<script type = "text/javascript">
var mailarr = [
{"title": "a c#upblem"、 "name": "Zhang San"、 "date": "2014-03-21"}、
{"title": "a javascriptの問題"、 "name": "li si"、 "date": "2014-03-21"}、
{"title": "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")。checked == true){
seleall(tab、true);
} それ以外 {
seleall(tab、false);
}
};
//選択したすべてを削除します
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);
} それ以外 {
アラート( "really");
}
}
};
};
関数loadtab(){
tab = document.getElementById( "tb");
// TRのテーブルにMailARRループトラバーサル法を追加する
for(var rowindex = 0; rowindex <mailarr.length; rowindex ++){
// var tr = tab.insertrow(-1); // -1は最後の行を指します
var tr = tab.insertrow(tab.rows.length -1); //最後の2行に挿入し、最後の行をすべて選択した行に保持する必要があります。
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;
}
}
//すべてのすべてのボタンを有効にするには、テーブルのすべての行を横断する必要があります
function seleall(mailtab、Issel){
for(var i = 0; i <mailtab.rows.length; i ++){
var tr = mailtab.rows [i];
tr.cells [0] .childnodes [0] .checked = issel;
}
}
</script>
</head>
<body>
<表ID = "TB" style = "border-collapse:collapse;">
<tr>
<th>シーケンス</th>
<th>タイトル</th>
<th>メーラーを送信</th>
<th>時間を送信</th>
</tr>
<! - ループの増加 - >
<! - すべてを選択 - >
<tr>
<td colspan = "4">
<入力id = "sela" type = "checkbox" /> <label for = "sela">すべてを選択< /label>
<a href = "#" id = "delsel">削除</a> </td>
</tr>
</table>
</body>
</html>