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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
js实现图片拖动改变顺序附图
May 13 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
Vue中component标签解决项目组件化操作
Sep 04 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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 文件缓存的性能测试
2010/04/25 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
python实现八大排序算法(2)
2017/09/14 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python的形参和实参使用方式
2019/12/24 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python Matplotlib模块的使用
2020/09/16 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
璀璨的珍珠、密钉和个性化珠宝:Lily & Roo
2021/01/21 全球购物
市场营销毕业生自荐信范文
2014/04/01 职场文书
高中生学习计划书
2014/09/15 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
警示教育片观后感
2015/06/17 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书