为单个数据表单元格或行设置样式 - 制作粗体文本

Question

我正在尝试在表上动态创建行。根据实体字段“isBold”，我可能希望将行或单元格设置为粗体（整行将是粗体，因此它的单元格或行并不重要）。当我将 Json 数据输入到 JQuery 函数中时，我有以下代码显示表格

function FillTimeEntriesTable(timeEntries)
    {
        var table = $("#time_entries-table").DataTable();
        table.clear();
        for (var i = 0; i < timeEntries.length; i++) {
            if (timeEntries[i].IsBold == true) {
                table.row.add([
                    '<td class="table-bold" nowrap>' + timeEntries[i].Date + '</td>',
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>',
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>',
                    '<td class="align-right table-bold">' + timeEntries[i].Hours + '</td>',
                    '<td></td>',
                    '<td class="align-right table-bold">' + timeEntries[i].ExtraTime + '</td>',
                    '<td></td>',
                    '<td class="table-bold" nowrap>' + timeEntries[i].DayTotals + '</td>',
                    '<td>' + timeEntries[i].RowParity + '</td>'
                ]);
            } else {
                table.row.add([
                    timeEntries[i].IsItalic ? '<td class="table-italic">' + timeEntries[i].Date + '</td>' : '<td nowrap>' + timeEntries[i].Date + '</td>',
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>',
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>',
                    '<td class="align-right">' + timeEntries[i].Hours + '</td>',
                    '<td></td>',
                    '<td class="align-right">' + timeEntries[i].ExtraTime + '</td>',
                    '<td></td>',
                    '<td>' + timeEntries[i].DayTotals + '</td>',
                    '<td>' + timeEntries[i].RowParity + '</td>'
                ]);
            }
        }
        table.dra

timeEntries 是一个引用数据列表，在 for 循环中，它允许使用引用数据类型中的字段。它打印正确，当然，样式除外。它应该是粗体，其中 isBold 为真（在调试期间，m 在正确读取时会进入内部）但是当我检查页面时，它只显示 td 和值（没有类内联声明......不是表格粗体，右对齐，nowrap 等。）。我正在使用带有 MVC 5 的数据表 JQuery。任何帮助都将不胜感激，谢谢，

Answer 1

我自己找到了，不过还是谢谢你。我只是使用了 fnRow 函数

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    if (aData[8] === "odd") {
                        $(nRow).css({ "background-color": "#dadada" });
                    }
                    else {
                        $(nRow).css({ "background-color": "#ffffff" });
                    }
                    if (aData[0] === 'Week Total') {
                        $(nRow).css({ "font-weight": "bold" });
                    }
                    else {
                        $(nRow).css({ "font-weight": "normal" });
                    }

我还不完全了解它是如何工作的，但 id 确实如此。该方法的标题是我想要理解的，但这只是需要一点时间。至于问题sn-p，我摆脱了'

if (aData[0] === 'Week Total') {

可以将其读取为“周总计”而不是“

Answer 2

认为您的问题与 Datatable 有关——您是否正确使用了这个 table.row.add 方法？我找到了这个文档：https://datatables.net/reference/api/row.add()。尚不清楚您是否可以通过这种方式在表格单元格上传递属性。看起来您需要在绘制行后通过 javascript 更改 CSS 属性。

更直接的方法是使用 jQuery 本身来构建您的表格，只需对您的原始函数进行一些调整即可完成：

function FillTimeEntriesTable(timeEntries)
    {
        var table = $("#time_entries-table");
        // remove all rows from tbody
        table.find('tbody').empty();
        for (var i = 0; i < timeEntries.length; i++) {
            if (timeEntries[i].IsBold == true) {
                var new_row_html = '<tr>' +
                    '<td class="table-bold" nowrap>' + timeEntries[i].Date + '</td>' +
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>' +
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>' +
                    '<td class="align-right table-bold">' + timeEntries[i].Hours + '</td>' +
                    '<td></td>' +
                    '<td class="align-right table-bold">' + timeEntries[i].ExtraTime + '</td>' +
                    '<td></td>' +
                    '<td class="table-bold" nowrap>' + timeEntries[i].DayTotals + '</td>' +
                    '<td>' + timeEntries[i].RowParity + '</td>' + '</tr>'
                ;
            } else {
                var new_row = '<tr>' +
                    timeEntries[i].IsItalic ? '<td class="table-italic">' + timeEntries[i].Date + '</td>' : '<td nowrap>' + timeEntries[i].Date + '</td>' +
                    '<td>' + timeEntries[i].Activity != null ? timeEntries[i].Activity : " " + '</td>' +
                    '<td>' + timeEntries[i].Notes != null ? timeEntries[i].Notes : " " + '</td>' +
                    '<td class="align-right">' + timeEntries[i].Hours + '</td>' +
                    '<td></td>' +
                    '<td class="align-right">' + timeEntries[i].ExtraTime + '</td>' +
                    '<td></td>' +
                    '<td>' + timeEntries[i].DayTotals + '</td>' +
                    '<td>' + timeEntries[i].RowParity + '</td>' + '</tr>'
                ;
            }
            table.find('tbody').append(new_row);
        }