javascript實現可全選、反選及刪除表格的方法

2024-05-06 16:20:22

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了javascript實現可全選、反選及刪除表格的方法,實例展示了javascript針對表格全選、反選、刪除、隔行變色、刪除提示等常用技巧,非常具有實用價值,需要的朋友可以參考下

本文實例講述了javascript實現可全選、反選及刪除表格的方法。分享給大家供大家參考。具體實現方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>可以全選反選刪除的表格</title>

<style type="text/css">

body,table

{

margin:0;

padding:0;

font-size:14px;

}

table,tr,th,td

{

border:1px solid #cdc;

}

th

{

background-color:green;

width:100px;

}

.oddColor

{

background-color:#ccc;

}

.evenColor

{

background-color:#fcf;

}

.overColor

{

background-color:#dff;

}

</style>

<script type="text/javascript">

//定義嵌套數組

var datas = [["張三", 30, "南昌"], ["李四", 25, "北京"], ["王五", 20, "鄭州"],

["趙六", 19, "武漢"], ["李莫", 18, "深圳"], ["羅成", 33, "重慶"],

["王平", 31, "天津"], ["劉萍", 22, "上海"], ["楊麗", 17, "石家莊"],

["郭麗", 30, "廣州"]];

//動態創建表格

function CreateMyTable() {

var tblMain = document.getElementById("tblMain");

var rowsCount = tblMain.rows.length;

var addRow;

var addCol;

var detailInfos;

for (var i = 0; i < datas.length; i++) {

addRow = tblMain.insertRow(rowsCount - 1);//控制數據行添加到倒數第二列

addCol = addRow.insertCell(-1);

addCol.innerHTML = "<input type='checkbox' name='item' />";

addCol.align = "center"; //控制列居中

detailInfos = datas[i];

for (var j = 0; j < detailInfos.length; j++) {

addCol = addRow.insertCell(-1);

addCol.innerHTML = detailInfos[j];

}

addCol = addRow.insertCell(-1);

addCol.innerHTML = "<input type='button' id='btnDel" + i + "' value='刪除' onclick='btnDel(this)' />";

addCol.align = "center"; //控制列居中

rowsCount++;

}

TableColor();

}

//設置網格間隔色和高亮顯示

var oldClassName; //記住行的背景色

function TableColor() {

var tblMain = document.getElementById("tblMain");

var rowNodes = tblMain.rows;

for (var i = 1; i < rowNodes.length-1; i++) { //除去首行和末行

if (i % 2 == 0) {

rowNodes[i].className = "evenColor";

}

else {

rowNodes[i].className = "oddColor";

}

rowNodes[i].onmouseover = function () {

oldClassName = this.className;

this.className = "overColor";

}

rowNodes[i].onmouseout = function () {

this.className = oldClassName;

}

}

}

//復選框全選函數

function checkAll() {

var currentCheckNode = event.srcElement;

var checkAllNodes = document.getElementsByName("all");

//把沒有點擊的全選復選框去除復選

for (var i = 0; i < checkAllNodes.length; i++) {

if (currentCheckNode != checkAllNodes[i]) {

checkAllNodes[i].checked = false;

}

}

var checkItemNodes = document.getElementsByName("item");

for (var i = 0; i < checkItemNodes.length; i++) {

checkItemNodes[i].checked = currentCheckNode.checked;

}

}

//按鈕選擇函數

function btnCheckboxSel(index) {

var checkItemNodes = document.getElementsByName("item");

for (var i = 0; i < checkItemNodes.length; i++) {

if (index == 2) {

checkItemNodes[i].checked = !checkItemNodes[i].checked;

}

else {

checkItemNodes[i].checked = index;

}

}

}

//每行的刪除按鈕函數

function btnDel(btn) {

var tblMain = document.getElementById("tblMain");

var delRowNode = btn.parentNode.parentNode;

var sMsg = "您是否要刪除姓名為:【" + delRowNode.cells[1].innerText + "】,年齡為:【" +

delRowNode.cells[2].innerText + "】,城市為:【" +

delRowNode.cells[3].innerText + "】的數據?";

if (window.confirm(sMsg)) {

tblMain.tBodies[0].removeChild(delRowNode);

TableColor();

}

}

//刪除所選項按鈕函數

function btnDelSelectRow() {

var arrDel = new Array();

var pos = 0;

var itemNodes = document.getElementsByName("item");

for (var i = 0; i < itemNodes.length; i++) {

if (itemNodes[i].checked) {

arrDel[pos] = itemNodes[i].parentNode.parentNode;

pos++;

}

}

if (pos <= 0) {

return;

}

if (!window.confirm("是否要刪除選擇的數據?"))

return;

var tblMain = document.getElementById("tblMain");

for (var i = 0; i < arrDel.length; i++) {

tblMain.tBodies[0].removeChild(arrDel[i]);

}

}

window.onload = CreateMyTable;

</script>

</head>

<body>

<table id="tblMain" cellspacing="0" cellpadding="10px" align="center">

<tbody>

<tr>

<th><input type="checkbox" name="all" onclick="checkAll()" />全選</th>

<th>姓名</th>

<th>年齡</th>

<th>城市</th>

<th>操作</th>

</tr>

<tr>

<th><input type="checkbox" name="all" onclick="checkAll()" />全選</th>

<th colspan="4">

<input type="button" value="全選" onclick="btnCheckboxSel(1)" />

<input type="button" value="全清" onclick="btnCheckboxSel(0)" />

<input type="button" value="反選" onclick="btnCheckboxSel(2)" />

<input type="button" value="刪除所選項" onclick="btnDelSelectRow()" />

</th>

</tr>

</tbody>

</table>

</body>

</html>