jquery - 动态设置特定单元格的颜色

Question

我有一个 17x17 表格，它是使用 jquery 动态生成的。见下文:

下面是我的代码:

$(document).ready(function() {
  var number_of_rows = 17;
  var number_of_cols = 17;
  var table_body = '<table border="0">';
  for (var i = 0; i < number_of_rows; i++) {
    table_body += '<tr>';
    for (var j = 0; j < number_of_cols; j++) {
      table_body += '<td>';
      table_body += '<button id="row_' + i + '" class="col_' + j + '">&nbsp;</button>';
      table_body += '</td>';
    }
    table_body += '</tr>';
  }
  table_body += '</table>';
  $('#tableDiv').html(table_body);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="tableDiv">
  Table will generate here.
</div>

我的问题是，我想将特定单元格的背景色动态设置为红色，如下表所示。我做了一些研究，但仍然找不到解决方案。

Answer 1

设置一个样式变量，如果行数和列数正确，则将其指定为红色背景色:

$(document).ready(function() {
  var number_of_rows = 17;
  var number_of_cols = 17;
  var table_body = '<table border="0">';
  for (var i = 0; i < number_of_rows; i++) {
    table_body += '<tr>';
    for (var j = 0; j < number_of_cols; j++) {

      var style = "";
      if (Math.ceil(i / 3) % 2 !== 0 && j % 4 !== 0) {
        style = "background-color: red;";
      }

      table_body += '<td style="' + style + '">';
      table_body += '<button id="row_' + i + '" class="col_' + j + '" style="' + style + '">&nbsp;</button>';
      table_body += '</td>';
    }
    table_body += '</tr>';
  }
  table_body += '</table>';
  $('#tableDiv').html(table_body);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="tableDiv">
  Table will generate here.
</div>