Doc14(表格单数行变色及点击变色)-CSDN博客

本文链接：https://blog.csdn.net/xbc1213/article/details/50600820

点击按钮表格单数行变色练习

语法:对象.style.backgroundColor=’颜色’;
注意点:在html中有-的单词在js中去掉-且后面首字母大写,例如上面的backgroundColor.另外颜色需要单引号引起来
实例:

<!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>
    <title></title>
    <script type="text/javascript">
        onload = function () {
            document.getElementById('btn').onclick = function () {
                var trs = document.getElementById('tb').getElementsByTagName('tr'); //这样比较严谨,如果有多个tb的话则肯定有错误.
                for (var i = 0; i < trs.length; i++) {
                    if (i % 2 == 0) {
                        trs[i].style.backgroundColor = 'green';
                    }
                }
            };
        };
    </script>
</head>
<body>
    <input type="button" name="name" value="变色" id='btn' />
    <table id='tb' border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td>第一个单元格
            </td>
            <td>第二个单元格
            </td>
        </tr>
        <tr>
            <td>第一个单元格
            </td>
            <td>第二个单元格
            </td>
        </tr>
        <tr>
            <td>第一个单元格
            </td>
            <td>第二个单元格
            </td>
        </tr>
        <tr>
            <td>第一个单元格
            </td>
            <td>第二个单元格
            </td>
        </tr>
        <tr>
            <td>第一个单元格
            </td>
            <td>第二个单元格
            </td>
        </tr>
    </table>

</body>
</html>

点击单元格变色练习

知识点:恢复默认颜色 =”; 在样式中设置光标移动上时鼠标变成小手
实例:

<!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>
    <title></title>
    <script type="text/javascript">
        onload = function () {
            var trs = document.getElementById('tb').getElementsByTagName('td');
            for (var i = 0; i < trs.length; i++) {

                trs[i].onclick = function () {
                    for (var i = 0; i < trs.length; i++) {
                        trs[i].style.backgroundColor = ''; //将颜色改为默认的颜色.
                    }

                    this.style.backgroundColor = 'green';
                   //在样式中设置小手样式
                };
            }
        };
    </script>
</head>
<body>
    <table id='tb' border="1" cellpadding="0" cellspacing="0" style='cursor:pointer;'>/
        <tr>
            <td>
                第一个单元格
            </td>
            <td>
                第二个单元格
            </td>
        </tr>
        <tr>
            <td>
                第一个单元格
            </td>
            <td>
                第二个单元格
            </td>
        </tr>
        <tr>
            <td>
                第一个单元格
            </td>
            <td>
                第二个单元格
            </td>
        </tr>
        <tr>
            <td>
                第一个单元格
            </td>
            <td>
                第二个单元格
            </td>
        </tr>
        <tr>
            <td>
                第一个单元格
            </td>
            <td>
                第二个单元格
            </td>
        </tr>
    </table>
</body>
</html>