我想根据我的标签使用纯 HTML CSS 或 JS 而不是任何外部 src 更改我的行颜色，因为它在我想要执行此操作的应用程序中不受支持。下面是我的代码：table { width: 750px; border-collapse: collapse; margin:20px auto;}tr:nth-of-type(even) { background: #eee;}tr:hover { background-color:#f5f5f5;}th { background: #1489b8; color: white; font-weight: default; }td, th { padding: 10px; border: 3px solid #ccc; text-align: center; font-size: 15px;}h3, p{ text-align: center;}<head> <h3>Hi User,</h3> <p>An alert is created. Following are the details.</p></head><table style="width:100%"> <thead> <tr> <th> Description</th> <td>working</td> </tr> <tr> <th>Parameter</th> <td>Shutdown</td> </tr> <tr> <th>Machine </th> <td>ABC</td> </tr> <tr> <th> Type</th> <td>Sensor Machine</td> </tr> <tr> <th> Severity</th> <td>Low</td> </thead></table>在此示例中，最后一个标签显示为“低”，我希望行颜色变为绿色。如果它读取介质，它应该变为“黄色”。这有可能发生吗？
1 回答
jeck猫
TA贡献1909条经验 获得超7个赞
您可以简单且最简单的方法是使用Javascript querySelectorAll方法获取td's表中的所有内容并检查它们的textContentif并使用条件应用颜色
如果条件matches与severity水平那么你可以使用style任何background你喜欢使用的。
现场工作示例：
let getTds = document.querySelectorAll('table td')
getTds.forEach(function(row) {
//Low
if (row.textContent == 'Low') {
row.style.background = 'green'
}
//Medium
if (row.textContent == 'Medium') {
row.style.background = 'yellow'
}
})
table {
width: 750px;
border-collapse: collapse;
margin: 20px auto;
}
tr:nth-of-type(even) {
background: #eee;
}
tr:hover {
background-color: #f5f5f5;
}
th {
background: #1489b8;
color: white;
font-weight: default;
}
td,
th {
padding: 10px;
border: 3px solid #ccc;
text-align: center;
font-size: 15px;
}
h3,
p {
text-align: center;
}
<head>
<h3>Hi User,</h3>
<p>An alert is created. Following are the details.</p>
</head>
<table style="width:100%">
<thead>
<tr>
<th> Description</th>
<td>working</td>
</tr>
<tr>
<th>Parameter</th>
<td>Shutdown</td>
</tr>
<tr>
<th>Machine </th>
<td>ABC</td>
</tr>
<tr>
<th> Type</th>
<td>Sensor Machine</td>
</tr>
<tr>
<th> Severity</th>
<td>Low</td>
</tr>
</thead>
<thead>
<tr>
<th> Description</th>
<td>working</td>
</tr>
<tr>
<th>Parameter</th>
<td>Shutdown</td>
</tr>
<tr>
<th>Machine </th>
<td>ABC</td>
</tr>
<tr>
<th> Type</th>
<td>Sensor Machine</td>
</tr>
<tr>
<th> Severity</th>
<td>Medium</td>
</tr>
</thead>
</table>
添加回答
举报
0/150
提交
取消