簡體   English   中英

JS腳本不會更改表格行的背景色

[英]JS Script doesn't change table row background color

所以,首先,我有2張桌子。 單擊主表上的一行時,將打開一個模式窗口,其中包含輔助表。 輔助表包含日期列。 如果日期等於"1111-11-11 / 11:11:11" ,則表示存在錯誤,因此,行背景色應切換為紅色。

這是在第一個表上單擊一行后打開模式窗口的代碼:

$(document).on('click', '#main-table tbody tr', function () {
  var id = $(this).find("td").eq(0).text();
  openPoolModal(id);
});

沒什么復雜的。 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" );
  }
});
}

從ajax調用返回的html代碼:

<div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</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>

所以現在,實際上我面臨着兩個問題。 首先是,第一次單擊mainTable行之后,什么都沒有發生。 當我第二次單擊時,第一次單擊的日期會打印到控制台中。 當我第三次單擊時,第二次單擊的日期將被打印,依此類推。

第二個問題是:

$(this).css( "background-color", "yellow" );

...似乎不起作用,因為它不會給背景上色。

使用如下

$(this).css( "background", "yellow" );

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM