
var rowIndex = -1; //选中行下标
var colorIndex; //选中行原背景色
var bgcolor; //临时储存当前行原先的颜色
var color1 = "#CFDFFF"; //交叉颜色1
var color2 = "#EFEFFF"; //交叉颜色2
var onColor = "#FFEFBF"; //鼠标行颜色
var selectColor = "#FFBFFF"; //选中行颜色
windowonload = function () {
updateColor("tb", 1);
}
//参数(表格ID,跳过多少行头)
function updateColor(id, passRow) {
var tb = documentgetElementById(id);
for (var i = passRow; i < tbrowslength; i++) {
var row = tbrows[i];
rowonmouseover = function () {
bgcolorOver(this);
}
rowonmouseout = function () {
bgcolorOut(this);
}
rowonclick = function () {
rowClick(this);
}
if (i % 2 == 0) {
rowstylebackgroundColor = color1;
} else {
rowstylebackgroundColor = color2;
}
}
}
function bgcolorOver(obj) {
if (rowIndex == objrowIndex) {
return;
}
bgcolor = objstylebackgroundColor;
objstylebackgroundColor = onColor;
}
function bgcolorOut(obj) {
if (rowIndex == objrowIndex) {
return;
}
objstylebackgroundColor = bgcolor;
}
function rowClick(obj) {
if (rowIndex != objrowIndex) {
if (rowIndex != -1) {
tbrows[rowIndex]stylebackgroundColor = colorIndex;
}
rowIndex = objrowIndex;
colorIndex = bgcolor;
objstylebackgroundColor = selectColor;
}
}<table style="width:300px;" id="tb">
<tr>
<td>1</td><td>A</td><td>a</td>
</tr>
<tr>
<td>2</td><td>B</td><td>o</td>
</tr>
<tr>
<td>3</td><td>C</td><td>e</td>
</tr>
</table>
<style type="text/css">
moveBg td{background:#EDEDED;color:#FF6600;}
moveBg select{background:#EDEDED;color:#FF6600;font-size:12px;}
moveBg a:link,a:visited,a:hover,a:active{color:#FF6600;}
tdbg td {background:#FFFFFF;}
tdbg select {width:200px;font-size:12px;}
tdbg a:link,a:visited,a:hover,a:active{color:#000000;}
</style><table width="100%" border="1" cellpadding="2" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#DDDDDD" bgcolor="#CCCCCC">
<tr onmouseout="thisclassName='tdbg'" onmouseover="thisclassName='moveBg'">
<td align="center" bgcolor="#FFFFFF">1233211234321</td>
<td align="center" bgcolor="#FFFFFF"><a href="">1233211234321</a></td>
<td align="center" bgcolor="#FFFFFF">1233211234321</td>
</tr>
</table>
1、首先开始新建html文件。
2、然后创建一个三行三列的表格。
3、接下来开始创建js函数。
4、接下来开始进行定义变量获取行。
5、然后就将函数加在按钮上。
6、就可以看到预览效果如图。
7、最后点击第二个按钮删除 第二行。
在js中,可以使用for循环,通过writey方法将数组元素逐个输出在表格中。
新建一个html文件,命名为testhtml,用于讲解如何将js数组在table表格中显示出来。在js标签中,创建一个数组,用于测试。在js标签中,使用write方法输出表格标签和行标签,创建一行表格。在js标签中,在表格标签内,使用for循环遍历数组元素。在for循环内,再通过write方法将单元格标签和数组元素值一起输出。在浏览器打开testhtml文件,查看结果。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)