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>