更改表格行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}.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(){//创建trlet 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文本节点添加到tdObjtdObj.appendChild(textObj);//将tdObj添加到trObjtrObj.appendChild(tdObj);}//获取tablelet tableObj = document.getElementById("table1");//将trObj添加到tableObjtableObj.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>

暂时无法直接使input输入框在网居中，只能“迂回作战”——将input输入框放在<span></span>标签中，通过设置span标签属性使input输入框居中。

更改表格行tr的背景颜色相关推荐

java td背景色_jQuery：无法更改表格单元格的背景颜色
我花了太多时间解决这个简单的问题,而不是我应该 . 因此,我想看看这个,因为我不明白为什么它不起作用 . 我习惯用jQuery更改CSS属性,但在这种特殊情况下它不起作用 . 所以这是我的功能,应该改 ...
改变表格单元格的背景颜色
功能 : 改变表格单元格的背景颜色作者 : zjly 修改时间 : 2007-04-11 电子邮件 : zjly4@163.com 参数 id ...
python改背景颜色_Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
!!!本博客,是对图像的背景颜色的修改的基础讲解~!!! 还包括一个练习--是对背景色修改的一点应用尝试!!!--始终相信学习多一点探索,脚步会更坚定一些~ 愿所有正在努力的人都可以坚持自己的路一直走 ...
php表格弄成隔两行变色,Excel表格实现隔行填充背景颜色的三种方法
Excel表格很多行的时候,为了避免看错行,我们可以设置成隔行填充背景颜色.那么除了一行一行手动设置,还可以怎么操作呢? 软件推荐一:[office 2007] 软件推荐二:[office 2013] ...
Python在IDLE中实现清屏和更改IDEL的shell的背景颜色
文章目录更改IDEL的shell背景颜色在IDEL中实现清屏今天才开始打算自学Python,刚装好的Python,使用IDEL的时候,发现白色的背景是在很闪眼睛,属实顶不住,然后就去问度娘,找到 ...
bgcolor是html的属性,HTML表格标记教程(7):背景颜色属性BGCOLOR
在HTML里,颜色有两种表示方式.一种是用颜色名称表示,比如blue表示蓝色.另外一种是用16进制的数值表示RGB的颜色值.RGB是Red,Green,B 2018-04-14 标记的属性用于设定表格 ...
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色（末尾有一个小训练——是将所学得的图像颜色修改应用为画板一般的刷新）
文章目录愿所有正在努力的人都可以坚持自己的路一直走下去! 实现轨迹(跟踪)栏功能的函数函数主要参数讲解代码实现我们先创建一个窗体,为轨迹(跟踪)栏的挂载做准备接着我们把需要的轨迹(跟踪)栏添 ...
如何更改cad块编辑的背景颜色
工作中遇到这么个问题,编辑块时,常常因为块编辑器的背景颜色,看不清楚颜色相近的元素如:一些标注和图层.相信同样从事cad工作的朋友们也会遇到. 现在解决了,呵呵! 请看下面的步骤: cad界面=〉工 ...
Excel如何按行间隔配置背景颜色
三妹看同事发的Excel表格按行间隔的颜色巨好看,而且在数据密密麻麻的时候也给区分行数降低了难度(比如,我现在看的是绿色这一行,那我往后扫很多列的时候不会窜到白色行). 然后我上网找了几个教程,发现他 ...

更改表格行tr的背景颜色

更改表格行tr的背景颜色相关推荐

最新文章

热门文章