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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
Jun 24 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
js微信分享实现代码
Oct 11 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
js中对象与对象创建方法的各种方法
Feb 27 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 采集心得技巧
2009/05/15 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
小学生作文评语集锦
2014/12/25 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
干部外出学习心得体会
2016/01/18 职场文书