Question

fnRowCallback: function(nRow, aData, iDisplayIndex) {
                    $('td', nRow).each(function() {
                        //$(this).addClass('bold'); --> works to bold entire row
                        // $("table tr td:nth-child(0)").addClass('bold'); -> doesn't work
                        // $("table tr td:nth-child(2)").addClass('bold'); -> doesn't work
                        console.trace("hello");
                        //$(this).css('color', 'red'); -> works to change the color of the entire row
                    });
                return nRow;
            },

我试图只在我的DataTable中使第一个和第二个字段变为粗体

Answer 1

正如之前的回答所说，你可以（并且应该！）使用css来做到这一点。

如果只想要特殊表格的前两列（“$ DataTable”）加粗，只需在表格上设置一个类，如

var $DataTable = $("table");
$DataTable.addClass("first-two-columns-bold");

.first-two-columns-bold td:nth-child(-n+2) {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 2

您不需要JS（并且不应仅将其用于UI目的）。您需要的只能在CSS中完成：

td:nth-child(-n+2) {
  font-weight: bold
}

<table>
  <tr>
    <td>A-1</td>
    <td>A-2</td>
    <td>A-3</td>
    <td>A-4</td>
  </tr>
  <tr>
    <td>B-1</td>
    <td>B-2</td>
    <td>B-3</td>
    <td>B-4</td>
  </tr>
  <tr>
    <td>C-1</td>
    <td>C-2</td>
    <td>C-3</td>
    <td>C-4</td>
  </tr>
</table>

Answer 3

正如您在评论中提到的，您希望根据单元格索引以及其他一些未指定的条件添加类。你可以使用fnRowCallback()这样做：

fnRowCallback: function(nRow, aData, iDisplayIndex) {
    $.each(nRow.cells, function(k, v) {
        if (k <= 1 /*additional logic goes here */) {
          // $(this) is current cell
          $(this).addClass('bold');
        }
    });
    return nRow;
}

Answer 4

        fnRowCallback: function(nRow, aData, iDisplayIndex) {
                $('td', nRow).each(function() {                        
                    console.trace(nRow);
                    $('td:eq(0)', nRow).addClass('bold');
                    $('td:eq(1)', nRow).addClass('bold');                        
                });
            return nRow;
        },

如何使用fnRowCallBack在数据表中创建第一个和第二个td BOLD

4 个答案: