javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
更新时间：2015年05月14日 16:12:48 作者：永远爱好写程序
这篇文章主要介绍了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法,涉及javascript表格操作及按钮实现表格切换的技巧,需要的朋友可以参考下
本文实例讲述了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://www.jb51.net",
"搜狐网": "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中,有多种方法可以合并数组,本文主要介绍了8种方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了javascript得到当前页的来路即前一页地址的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下2014-12-12
点击按钮清空页面上所有的文本框、文本域，下面有个不错的示例，大家可以参考下其具体实现2014-02-02
瀑布流，又称瀑布流式布局，是比较流行的一种网站页面布局，这篇文章主要介绍了js实现瀑布流的三种方式，感兴趣的小伙伴们可以参考一下2015-12-12
这篇文章主要为大家详细介绍了js canvas实现圆角图片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了微信小程序实现拖动悬浮图标效果,小程序上是实现拖动图标,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了gulp-htmlmin压缩html的gulp插件实例代码的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要为大家详细介绍了BootStrap模态框不垂直居中的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论