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 相关文章推荐
js最简单的拖拽效果实现代码
Sep 24 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
vue实现验证用户名是否可用
Jan 20 Vue.js
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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
面向切面编程(AOP)的理解
2015/05/01 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python使用tornado实现登录和登出
2018/07/28 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
django query模块
2019/04/20 Python
java判断三位数的实例讲解
2019/06/10 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
PyQt5使用QTimer实现电子时钟
2019/07/29 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
安全知识竞赛主持词
2015/06/30 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript