【问题标题】:JS Script doesn't change table row background colorJS 脚本不改变表格行背景颜色
【发布时间】:2018-05-17 21:35:53
【问题描述】:

所以,首先,我确实有 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" );

...似乎不起作用,因为它不会为背景着色。

【问题讨论】:

  • 你试过调试了吗?
  • 我不是真正的JS开发者,我对调试JS一无所知。

标签: javascript jquery thymeleaf


【解决方案1】:

像下面这样使用

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-10-14
    • 1970-01-01
    • 2012-12-02
    • 2011-05-23
    • 2015-02-28
    • 1970-01-01
    • 2020-12-03
    • 2023-04-05
    相关资源
    最近更新 更多