javascript实现可全选、反选及删除表格的方法


Posted in Javascript onMay 15, 2015

本文实例讲述了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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
javascript模拟select,jselect的方法实现
Nov 08 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
vue实现简单的日历效果
Sep 24 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 #Javascript
javascript实现Table排序的方法
May 15 #Javascript
Javascript动态创建表格及删除行列的方法
May 15 #Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
You might like
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
2016/11/17 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
详解python中的Turtle函数库
2018/11/19 Python
Python高斯消除矩阵
2019/01/02 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python中pickle模块浅析
2020/12/29 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
木马的传播途径主要有哪些
2016/04/08 面试题
酒店个人求职信范文
2014/01/25 职场文书
三年级小学生评语
2014/04/22 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
司机岗位职责
2015/02/04 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android