javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法。分享给大家供大家参考。具体实现方法如下:

<!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>Table间隔色以及选择高亮(和动态切换数据)</title>
<script type="text/javascript">
var Datas1 = {
  "李莫": "毕业于清华大学",
  "周平": "毕业于北京大学",
  "罗达": "毕业于哈尔滨大学",
  "郑朵": "毕业于河南大学",
  "王天": "毕业于湖南大学"
};
var Datas2 = {
  "三水点靠木": "https://3water.com",
  "搜狐网": "http://www.souhu.com",
  "CSDN程序员开发网站": "http://www.csdn.net",
  "百度": "http://www.baidu.com",
  "网易": "http://www.163.com"
};
function ToggleData() {
  var btn = document.getElementById("btnToggle");
  if (btn.value == "数据1") {
    loadData(Datas1, "数据2");
  }
  else {
    loadData(Datas2, "数据1");
  }
}
function loadData(Datas,btnValue) {
  var tblMain = document.getElementById("tblMain");
  //清空table数据
  var trs = tblMain.getElementsByTagName("tr");
  var trsLen = trs.length;
  //必须先把trs的长度存放到一个变量中
  for (var i = 0; i < trsLen; i++) {
    tblMain.deleteRow(0);
  }
  var nIndex = 0;
  for (var key in Datas) {
    var tr = tblMain.insertRow(-1);
    tr.onmouseover = trMouseOver;
    tr.onmouseout = trMouseOut;
    var td1 = tr.insertCell(-1);
    td1.innerHTML = key;
    var td2 = tr.insertCell(-1);
    td2.innerHTML = Datas[key];
    if (nIndex % 2 == 0) { //设置间隔色
      tr.style.background = "yellow";
    }
    else {
      tr.style.background = "white";
    }
    nIndex++;
  }
  var btn = document.getElementById("btnToggle");
  btn.value = btnValue;
}
function trMouseOver() {
  var tblMain = document.getElementById("tblMain");
  //清空数据
  var trs = tblMain.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {      
    if (this == trs[i]) {
      trs[i].style.background = "green";
    }
  }
}
function trMouseOut() {
  var tblMain = document.getElementById("tblMain");
  var trs = tblMain.getElementsByTagName("tr");
  for (var i = 0; i < trs.length; i++) {
    if (i % 2 ==0) {
      trs[i].style.background = "yellow";
    }
    else {
      trs[i].style.background = "white";
    }
  }      
}
function iniEvent() {
  loadData(Datas1, "数据2");
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain">
<tbody></tbody>
</table>
<input type ="button" id="btnToggle" value="数据2"
onclick="ToggleData()" />
</body>
</html>

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

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
JavaScript匿名函数用法分析
Feb 13 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
react-router中的属性详解
Jun 01 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
Element Dialog对话框的使用示例
Jul 26 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
javascript清空table表格的方法
May 14 #Javascript
AngularJS的内置过滤器详解
May 14 #Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 #Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 #Javascript
javascript基于DOM实现权限选择实例分析
May 14 #Javascript
javascript中DOM复选框选择用法实例
May 14 #Javascript
JS对字符串编码的几种方式使用指南
May 14 #Javascript
You might like
两个强悍的php 图像处理类1
2009/06/15 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
javascript 定义新对象方法
2010/02/20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
怎么清空javascript数组
2013/05/11 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
军训心得体会
2013/12/31 职场文书
少年闰土教学反思
2014/02/22 职场文书
2014年党务工作总结
2014/11/25 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
党员转正介绍人意见
2015/06/03 职场文书
2016年小学端午节活动总结
2016/04/01 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android