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 表单下所有元素的隐藏
Jul 25 Javascript
jQuery 联动日历实现代码
May 31 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
angular十大常见问题
Mar 07 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
ES6中的类(Class)示例详解
Dec 09 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python的print用法示例
2014/02/11 Python
Python 的 Socket 编程
2015/03/24 Python
Python切片知识解析
2016/03/06 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python机器学习实现决策树
2019/11/11 Python
浅析Django中关于session的使用
2019/12/30 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python容器类型公共方法总结
2020/08/19 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
文员个人的求职信范文
2013/09/26 职场文书
安全责任协议书
2014/04/21 职场文书
兽医医药专业求职信
2014/07/27 职场文书
与死神共舞观后感
2015/06/15 职场文书