更改表格行tr的背景颜色

入门有点晚

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

阅读量7.6k

点赞数 1

文章标签： javascript html css

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

本文链接：https://blog.youkuaiyun.com/weixin_45190226/article/details/123066764

版权

本文介绍如何在鼠标悬停时动态改变HTML表格行的背景颜色。通过JavaScript，利用CSS class或直接设置属性实现这一功能。同时，讨论了input标签的样式调整，包括padding、border-radius以及居中显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

具体代码如下：

<!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</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>空调机</td>
            <td>3500</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>冰箱</td>
            <td>3000</td>
        </tr>
    </table>
</body>
</html>

代码运行结果如下：
在这里插入图片描述
关键部分代码如下：

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";
                }
            }

直接为遍历到的每一行tr赋值一个class属性值。

关键部分代码第二种实现：

let trs = document.getElementsByTagName("tr");
            for(let i=1;i<trs.length;i++){
                trs[i].onmouseover = function(){
                    trs[i].setAttribute("class","tr1");
                }
                trs[i].onmouseout = function(){
                    trs[i].setAttribute("class","tr2");
                }
            }

利用setAttribute()方法为遍历到的tr赋值一个class属性值。

关键部分代码第三种实现：

let trs = document.getElementsByTagName("tr");
            for(let i=1;i<trs.length;i++){
                trs[i].onmouseover = function(){
                    trs[i].style.backgroundColor = "blue";
                }
                trs[i].onmouseout = function(){
                    trs[i].style.backgroundColor = "white";
                }
            }

去掉前面<style>标签中的

.tr1{background-color: bisque}
.tr2{background-color: white}

这两个class属性。
直接为鼠标悬停到的tr设置背景颜色值。

运行代码结果：
在这里插入图片描述

以上代码只适用于，“静态页面表格”情况。
下面是动态生成表格情况下改变表格tr的策略。

一.业务需求：
1.将商品信息添加到输入到相对应的信息输入框中，通过点击“按钮”将商品信息添加到“商品信息表”中生成表格的一部分。
2.当鼠标悬停在某一表格信息行（即tr）上，当前表格行的背景颜色就会变成蓝色。

二.业务代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>change table row backGroundColor</title>
    <style>
        tr{text-align: center}
        caption{margin: 25px}
        input{background-color: #FFF68F;text-align: center;
              outline-style: dashed;
              border-color: blue;border-style: solid;border-radius: 4px;
              padding: 6px 0px;width: 150px;
              font-size: 15px;font-family: 微软雅黑;}
        #span1{text-align:center;display: block;}
        /*border-radius 属性允许您向元素添加圆角。*/
        /*在输入框中可以使用padding标签属性来调整输入框的高度*/
        a{border-color: red;border-style: solid;}
    </style>
    <script>
        /**构建一个constructTable()方法：动态创建表格**/
        function constructTable(){
            //创建tr
            let trObj = document.createElement("tr");
            trObj.onmouseover = function (){
                trObj.style.backgroundColor = "blue";
            }
            trObj.onmouseout = function (){
                trObj.style.backgroundColor = "white";
            }
            //更改tr行的背景颜色
            let inputObjs = document.getElementsByTagName("input");
            for(let i=0;i<inputObjs.length;i++){
                //获取input中用户输入的value值
                let inputValue = inputObjs[i].value;
                //创建文本节点
                let textObj = document.createTextNode(inputValue);
                //创建td标签
                let tdObj = document.createElement("td");
                //将textObj文本节点添加到tdObj
                tdObj.appendChild(textObj);
                //将tdObj添加到trObj
                trObj.appendChild(tdObj);
            }
            //获取table
            let tableObj = document.getElementById("table1");
            //将trObj添加到tableObj
            tableObj.appendChild(trObj);
            /***将输入框中数据添加到表格中后，清空input标签中数据***/
            for (let i=0;i<inputObjs.length;i++){
                inputObjs[i].value="";
            }
        }
    </script>
</head>
<body>
    <span id="span1">
    商品编号：<input type="text" placeholder="请输入商品编号"
                oninput="value=value.replace(/[^\d]/g,'')";><br/><br/>
    商品名称：<input type="text" placeholder="请输入商品名称"><br/><br/>
    商品价格：<input type="text" placeholder="请输入商品价格"><br/><br/>
    <a href="javascript:void(0)" onclick="constructTable()">提交数据到表格</a>
    </span>
    <table id="table1" border="2px" align="center" cellspacing="0px"
           width="40%" cellpadding="10px">
        <caption>商品信息表</caption>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
        </tr>
    </table>
</body>
</html>

三.代码运行结果如下：

在这里插入图片描述

四.代码分析：
1.input标签中需注意的代码：
1)在输入框中可以使用padding标签属性来调整输入框的高度。

2)使“商品编号”输入框中只能输入数字

商品编号：<input type="text" placeholder="请输入商品编号"oninput="value=value.replace(/[^\d]/g,'')";>

3)border-radius 属性允许您向元素添加圆角。

2.更改动态添加的tr的背景颜色代码：

 let trObj = document.createElement("tr");
            trObj.onmouseover = function (){
                trObj.style.backgroundColor = "blue";
            }
            trObj.onmouseout = function (){
                trObj.style.backgroundColor = "white";
            }

当鼠标悬停在tr就改变其背景颜色，移开后恢复原来背景色。
3.href=“javascript:void(0)”

<a href="javascript:void(0)" onclick="constructTable()">

不能用href="#" ，因为此时点击<a>按钮之后会变色。
4.使input输入框在网页居中

......
#span1{text-align:center;display: block;}
......
<span id="span1">
    商品编号：<input type="text" placeholder="请输入商品编号"
                oninput="value=value.replace(/[^\d]/g,'')";><br/><br/>
    商品名称：<input type="text" placeholder="请输入商品名称"><br/><br/>
    商品价格：<input type="text" placeholder="请输入商品价格"><br/><br/>
    <a href="javascript:void(0)" onclick="constructTable()">提交数据到表格</a>
</span>