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在正确读取时击中内部）但是当我检查ELEMENT页面时，它只显示td和值（NO类内联声明......不是表格粗体，右对齐，现在等等。）。我正在使用数据表JQuery和MVC 5.任何帮助都会很感激，谢谢，

Answer 1

我自己找到了，谢谢你。我刚刚使用了fnRow功能

＆＃13;

"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" });
                    }

＆＃13;

我还没有完全理解它是如何工作的，但是id确实如此。方法的标题是我想要理解的，但这只需要一点时间。至于问题片段，我摆脱了＆＃39;

＆＃13;

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

＆＃13;

可以将其视为＆＃39;周总计＆＃39;而不是＆＃39;

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);
        }

样式单个数据表单元格或行 - 创建粗体文本

2 个答案: