一.业务代码说明：
制作一张商品信息表格，要求当鼠标移动到表格某一行的时候此行的背景颜色集会发生变化，当鼠标移开其背景颜色就会恢复为白色。
具体代码如下：
<!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>
暂时无法直接使input输入框在网居中，只能“迂回作战”——将input输入框放在<span></span>标签中，通过设置span标签属性使input输入框居中。