[英]JS Script doesn't change table row background color
So, first of all, I do have 2 tables. 所以,首先,我有2张桌子。 When a row on a main table is clicked a modal window opens with secondary table.
单击主表上的一行时,将打开一个模式窗口,其中包含辅助表。 The secondary table contains date column.
辅助表包含日期列。 If a date is equal to
"1111-11-11 / 11:11:11"
that means there's an error and so, the row backgroud color should be switched to red. 如果日期等于
"1111-11-11 / 11:11:11"
,则表示存在错误,因此,行背景色应切换为红色。
Here's the code to open the modal window after clicking a row on the first table: 这是在第一个表上单击一行后打开模式窗口的代码:
$(document).on('click', '#main-table tbody tr', function () {
var id = $(this).find("td").eq(0).text();
openPoolModal(id);
});
Nothing complicated. 没什么复杂的。
openPoolModal
function is where I print date to the console as well as try to change the color. openPoolModal
函数是我在控制台上打印日期以及尝试更改颜色的地方。
function openPoolModal(id){
$.ajax({
url: "/" + id,
success: function(data){
$("#PoolModalHolder").html(data);
$("#personalModal").modal();
$("#personalModal").modal('show');
$('#poolTable').DataTable({
some DataTables settings;
});
}
});
$("#poolTable tr").each(function(){
var col_val = $(this).find("td").eq(1).text();
console.log(col_val);
if (col_val == "1111-11-11 / 11:11:11"){
$(this).css( "background-color", "yellow" );
}
});
}
And html code that gets returned from an ajax call: 从ajax调用返回的html代码:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-center" th:text="'Network: ' + ${poolHashrates[0].networkHashrate.id}">Network Id</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table width="100%" class="table table-hover " id="poolTable">
<thead class="thead-inverse">
<tr>
<th class="col-md-2 text-center">Pool name</th>
<th class="col-md-2 text-center">Date from</th>
<th class="col-md-2 text-center">Hashrate [KH/s]</th>
</tr>
</thead>
<tbody>
<tr th:each="poolHashrate : ${poolHashrates}">
<td class="text-center" th:text="${poolHashrate.poolDef.name}"> Sample data</td>
<td class="text-center" th:text="${@getDataService.formatDate(poolHashrate.poolDef.dateFrom)}">Maven Street 10, Glasgow</td>
<td class="text-center" th:text="${@getDataService.formatHashrate(poolHashrate.hashrate)}">999-999-999</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
So now, there are actually 2 problems I'm facing. 所以现在,实际上我面临着两个问题。 First is, that after clicking the mainTable row for the first time, nothing really happens.
首先是,第一次单击mainTable行之后,什么都没有发生。 When I click second time, the date from the first click gets printed into console.
当我第二次单击时,第一次单击的日期会打印到控制台中。 When I click for the third time, the date from second click gets printed and so on.
当我第三次单击时,第二次单击的日期将被打印,依此类推。
Second problem is that: 第二个问题是:
$(this).css( "background-color", "yellow" );
...doesn't seem to work as it doesn't colour the background. ...似乎不起作用,因为它不会给背景上色。
使用如下
$(this).css( "background", "yellow" );
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.