js動(dòng)態(tài)添加表格數(shù)據(jù)使用insertRow和insertCell實(shí)現(xiàn)
更新時(shí)間：2014年05月22日 09:14:03 作者：
這篇文章主要介紹了js動(dòng)態(tài)添加表格數(shù)據(jù)并使用insertRow和insertCell實(shí)現(xiàn),需要的朋友可以參考下
效果圖:
代碼:
js動(dòng)態(tài)添加表格數(shù)據(jù)_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動(dòng)態(tài)添加表格數(shù)據(jù)_2 使用insertRow和insertCell方法實(shí)現(xiàn)</title>
<script type="text/javascript">
var mailArr = [
{ "title": "一個(gè)c#問題", "name": "張三", "date": "2014-03-21" },
{ "title": "一個(gè)javascript問題", "name": "李四", "date": "2014-03-21" },
{ "title": "一個(gè)c問題", "name": "五五", "date": "2014-03-21" },
{ "title": "一個(gè)c++問題", "name": "趙六", "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);
} else {
seleAll(tab, false);
}
};
//刪除所有的選中的
document.getElementById("delSel").onclick = function() {
//遍歷所有的input控件即可(除了最后一個(gè)全選用的checkbox)
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);
} else {
alert("really");
}
}
};
};
function loadTab() {
tab = document.getElementById("tb");
//把mailArr循環(huán)遍歷方式以tr的方式加入表格中
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;
}
}
//要使全選按鈕生效，就要遍歷所有的表格的行
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>
<table id="tb" border="1" style="border-collapse: collapse;">
<tr>
<th>序列</th>
<th>標(biāo)題</th>
<th>發(fā)郵人</th>
<th>發(fā)件時(shí)間</th>
</tr>
<!-- 循環(huán)增加 -->
<!-- 全選 -->
<tr>
<td colspan="4">
<input id="selA" type="checkbox" /><label for="selA">全選</label>
<a href="#" id="delSel">刪除</a></td>
</tr>
</table>
</body>
</html>
代碼:
js動(dòng)態(tài)添加表格數(shù)據(jù)_2.html
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js動(dòng)態(tài)添加表格數(shù)據(jù)_2 使用insertRow和insertCell方法實(shí)現(xiàn)</title>
<script type="text/javascript">
var mailArr = [
{ "title": "一個(gè)c#問題", "name": "張三", "date": "2014-03-21" },
{ "title": "一個(gè)javascript問題", "name": "李四", "date": "2014-03-21" },
{ "title": "一個(gè)c問題", "name": "五五", "date": "2014-03-21" },
{ "title": "一個(gè)c++問題", "name": "趙六", "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);
} else {
seleAll(tab, false);
}
};
//刪除所有的選中的
document.getElementById("delSel").onclick = function() {
//遍歷所有的input控件即可(除了最后一個(gè)全選用的checkbox)
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);
} else {
alert("really");
}
}
};
};
function loadTab() {
tab = document.getElementById("tb");
//把mailArr循環(huán)遍歷方式以tr的方式加入表格中
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;
}
}
//要使全選按鈕生效，就要遍歷所有的表格的行
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>
<table id="tb" border="1" style="border-collapse: collapse;">
<tr>
<th>序列</th>
<th>標(biāo)題</th>
<th>發(fā)郵人</th>
<th>發(fā)件時(shí)間</th>
</tr>
<!-- 循環(huán)增加 -->
<!-- 全選 -->
<tr>
<td colspan="4">
<input id="selA" type="checkbox" /><label for="selA">全選</label>
<a href="#" id="delSel">刪除</a></td>
</tr>
</table>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了微信小程序使用modal組件彈出對(duì)話框功能,結(jié)合實(shí)例形式分析了微信小程序model組件相關(guān)屬性及事件響應(yīng)操作技巧,需要的朋友可以參考下2017-11-11
基于javascript實(shí)現(xiàn)移動(dòng)端輪播圖效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)移動(dòng)端輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
JS中數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm)實(shí)例詳解
排序也稱排序算法 (Sort Algorithm)，排序是將 一組數(shù)據(jù) ， 依指定的順序 進(jìn)行 排列的過程 。這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)與算法---排序算法(Sort Algorithm),需要的朋友可以參考下2019-06-06
Jquery把獲取到的input值轉(zhuǎn)換成json
本篇文章主要介紹了Jquery把獲取到的input值轉(zhuǎn)換成json的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
下面小編就為大家?guī)硪黄嫒轂g覽器的js事件綁定函數(shù)(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
上傳文件時(shí),選擇了文件后想清空文件路徑，經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法在此與大家分享下，感興趣的朋友不要錯(cuò)過2013-10-10
純JavaScript基于notie.js插件實(shí)現(xiàn)消息提示特效
這篇文章主要介紹了純JavaScript基于notie.js插件實(shí)現(xiàn)消息提示特效，可以制作Alert提示框，確認(rèn)框和帶輸入的消息框，感興趣的小伙伴們可以參考一下2016-01-01
JS實(shí)現(xiàn)的數(shù)組全排列輸出算法
這篇文章主要介紹了JS實(shí)現(xiàn)的數(shù)組全排列輸出算法,實(shí)例分析了全排列的原理與相關(guān)的javascript實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
js控住DOM實(shí)現(xiàn)發(fā)布微博效果
這篇文章主要為大家詳細(xì)介紹了js控住DOM實(shí)現(xiàn)發(fā)布微博效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了JavaScript中的作用域與閉包，JavaScript是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語言，下文是更多相關(guān)介紹需要的小伙伴可以參考一下2022-05-05