Doc14(表格单数行变色及点击变色)

来源：互联网发布：域名要实名认证吗编辑：程序博客网时间：2024/04/29 22:26

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

语法:对象.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>

0 0