gpt4 book ai didi

javascript - 如何更改引导表行背景?

转载 作者:行者123 更新时间:2023-11-27 22:56:24 25 4
gpt4 key购买 nike

如果结果是“好”,我希望整行都变成绿色。但这并没有改变任何东西。

https://jsfiddle.net/Tonato_/tnw3j5p2/7/

这是代码。

我完全没有意识到问题是什么。我想我做对了。

function rowStyle(row, index) {
const obj = {};
var classes = ['active', 'success', 'info', 'warning', 'danger'];
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('BAD'))) {
return Object.assign({}, obj, {
classes: 'danger'
});
}
if (Object.keys(row).map(key => row[key]).some(value => String(value).includes('GOOD'))) {
return Object.assign({}, obj, {
classes: 'success'
});
}
return obj;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</table>

最佳答案

您可以使用简单的 jQuery 代码实现它,运行下面的代码片段

$('table tr').each(function() {
if($(this).find('td:last-child').html() === 'GOOD'){
$(this).css('background-color', 'green');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-row-style="rowStyle" class="table table-bordered table-hover thead-dark thead-inverse">
<thead>
<tr>
<th scope="col" style="width: 8%" class="text-center">Number</th>
<th scope="col" style="width: 20%" class="text-center">Name</th>
<th scope="col" style="width: 61%" class="text-center">Present</th>
<th scope="col" style="width: 10%" class="text-center">Result</th>
</tr>
</thead>
<tr>
<td class="text-center">01</td>
<td class="text-center">$title01</td>
<td>$present01</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
<tr>
<td class="text-center">02</td>
<td class="text-center">$title02</td>
<td>$present02</td>
<td scope="row" class="text-center">BAD</td>
</tr>
<tr>
<td class="text-center">03</td>
<td class="text-center">$title03</td>
<td>$present03</td>
<td scope="row" class="text-center">GOOD</td>
</tr>
</table>

关于javascript - 如何更改引导表行背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55607733/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com