更改表格行tr的背景颜色

入门有点晚

已于 2022-03-01 21:50:40 修改

阅读量7.4k

点赞数 1

文章标签： javascript html css

于 2022-02-22 14:28:32 首次发布

本文链接：https://blog.csdn.net/weixin_45190226/article/details/123066764

版权

一.业务代码说明：
制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change table row backGroundColor</title>
    <style>
        tr{
   text-align: center}
        caption{
   margin: 25px}
        .tr1{
   background-color: bisque}
        .tr2{
   background-color: white}

    </style>
    <script>
        let changeTrBGColor = function () {
   
            let trs = document.getElementsByTagName("tr");
            for(let i=1;i<trs.length;i++){
   
                trs[i].onmouseover = function(){
   
                    trs[i].className = "tr1";
                }
                trs[i].onmouseout = function(){
   
                    trs[i].className = "tr2";
                }
            }
        }
        window.onload = function () {
   
            changeTrBGColor();
        }
    </script>
</head>
<body>
    <table id="table1" border="2px" align="center" cellspacing="0px"
           width="40%" cellpadding="10px">
        <caption>商品信息表</caption>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
        </tr>
        <tr>
            <td>1001</td>
            <td>洗衣机</td>
            <td>2800</

最低0.47元/天解锁文章

入门有点晚

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
更改表格行tr的背景颜色

一.业务代码说明：制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>change table row backGroundColor</title> <style>
复制链接

扫一扫