html 表格间隙颜色,javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法...

阅读: 评论:0

html 表格间隙颜色,javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法...

html 表格间隙颜色,javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法...

/p>

".dtd">

Table间隔色以及选择高亮(和动态切换数据)

var Datas1 = {

"李莫": "毕业于清华大学",

"周平": "毕业于北京大学",

"罗达": "毕业于哈尔滨大学",

"郑朵": "毕业于河南大学",

"王天": "毕业于湖南大学"

};

var Datas2 = {

"脚本之家": "",

"搜狐网": "",

"CSDN程序员开发网站": "",

"百度": "",

"网易": ""

};

function ToggleData() {

var btn = ElementById("btnToggle");

if (btn.value == "数据1") {

loadData(Datas1, "数据2");

}

else {

loadData(Datas2, "数据1");

}

}

function loadData(Datas,btnValue) {

var tblMain = ElementById("tblMain");

//清空table数据

var trs = ElementsByTagName("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);

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 = ElementById("btnToggle");

btn.value = btnValue;

}

function trMouseOver() {

var tblMain = ElementById("tblMain");

//清空数据

var trs = ElementsByTagName("tr");

for (var i = 0; i < trs.length; i++) {

if (this == trs[i]) {

trs[i].style.background = "green";

}

}

}

function trMouseOut() {

var tblMain = ElementById("tblMain");

var trs = ElementsByTagName("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");

}

οnclick="ToggleData()" />

本文发布于:2024-01-29 00:21:01,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170645886611364.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:间隙   间隔   表格   颜色   方法
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23