如何设置每个 tr 组第一行的样式？

Question

我想放置一个按钮来展开我的数据中的子行table，其中数据中的每个组table 都应该有相同的子行....

以下css将图标放在整个table

的每一行

    td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}

如何仅设置每个组中第一行（或中间行，如果可能）的样式，以便为子行设置图标？

提前致谢！

更新：数据tables初始化，演示基本结构..

$(document).ready(function ()
{

    $('#myDataTable thead tr#filterrow th').each(function () {

        var title = $('#myDataTable thead th').eq($(this).index()).text();
        $(this).html('<input type="text" onclick="stopPropagation(event);" placeholder="Search ' + title + '""style="direction: ltr; text-align:left;" />');

    });
    $("#myDataTable thead input").on('keyup change', function () {
        table
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();
    });

    var table = $('#myDataTable').DataTable({
        //"scrollY": "200",
        "scroller": "true",
        "deferRender": "true",
        "orderCellsTop": "true",
        "columnDefs":
            [
                { "visible": false, "targets": 1 },
                {
                    "className": 'details-control', "targets": 0
                },
                 {
                     "orderable": false, "targets": 0
                 }
            ],

        "order": [[1, 'asc']],
        "displayLength": 100,
        "drawCallback": function (settings)
        {
            var api = this.api();
            var rows = api.rows({ page: 'current' }).nodes();
            var last = null;
            api.column(1, { page: 'current' }).data().each(function (group, i) {
                if (last !== group) {
                    $(rows).eq(i).before(
                        '<tr class="group"><td colspan="91">' + group + '</td></tr>'
                    );

                    last = group;
                }

            });
        }
    });
    // Apply the search
    table.columns().every(function () {
        var that = this;

        $('input', this.header()).on('keyup change', function () {
            that
                .search(this.value)
                .draw();
        });
    });

    // Order by the grouping
    $('#myDataTable tbody').on('click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if (currentOrder[0] === 1 && currentOrder[1] === 'asc') {
            table.order([1, 'desc']).draw();
        }
        else {
            table.order([1, 'asc']).draw();
        }
    });

    $('#myDataTable').dataTable().makeEditable(
        {
            "aoColumns":
            [.........]
        });
    // Add event listener for opening and closing details
    $('#myDataTable tbody').on('click', 'td.details-control', function () {
        console.log(table.row(this).data());
        var tr = $(this).closest('tr');
        var row = table.row(tr);

        if (row.child.isShown())
        {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });
});

Answer 1

使用伪classfirst-child

.table-class tr:first-child{
    // css
}

Answer 2

不知道你的 HTML 我不得不猜测它是这样的：

<table>
  <tr class="group">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="shown">[...]</tr>
  <tr class="group">[...]</tr>
  <tr class="shown">[...]</tr>
</table>

如果是这种情况，您可以使用相邻的同级 select 或 tr.group + tr.shown 到 select 每个 .group 之后的第一个 .shown 同级。

Answer 3

您好，您可以这样写：

table.test-table tr:first-child{
   /* enter css code here */
}

Answer 4

tr.group + tr td.details-control {
    background: url('../Content/DataTables/images/details_open.png') no-repeat left center;
    cursor: pointer;
}
tr.group + tr.shown td.details-control{
    background: url('../Content/DataTables/images/details_close.png') no-repeat left center;
}

成功了吗....我调整了 Andrea Ghidini 的回答

如何设置每个 tr 组第一行的样式？

How to style the first row of every tr group?

html

css

grouping

datatables