js实现表格隔行变色,滑动变色,点击变色,配合jquery也行 求代码啊!!!!

js实现表格隔行变色,滑动变色,点击变色,配合jquery也行 求代码啊!!!!,第1张

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文件,查看结果。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/12174776.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-21
下一篇2023-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存