Question

我正在使用数据表播种数据，我希望为前三行制作不同的颜色第一个应该是绿色第二个蓝色，第三行颜色应该是红色

我的表格结构为

<script>
  $(document).ready(function() {
        $(document).ready(function() {
        $('#project').DataTable({
        "columnDefs": [
        { "orderable": false, "targets": [0,6,7] }
        ]
        });
        });
    });
</script>

<table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="project" class="color">
    <thead>
        <tr role="row">
            <th style="display:none"></th>
            <th>Sr</th>
            <th>Reg #</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    @foreach($results as $index => $result)
    <tr>
        <td style="display:none"></td>
        <td>{{ $index+1 }}</td>
        <td class="sorting_1"> {{ $result->reg_no }} </td>
        <td>{{ $result->first_name }}</td>
    </tr>
    @endforeach
    </tbody>
</table>

我试图将样式赋予第一行

.color td {
    background-color : green;
}

但不工作请帮助解决它

谢谢

Answer 1

所有现代浏览器都支持CSS nth-child选择器。 Backgroundcolours可以应用于整行：

tbody>tr:nth-child(1) { /* etc */
    background-color: green;
}

并非所有属性都可以应用于行。有时您需要将它们应用于内部的单元格：

tbody>tr:nth-child(1) td {  /* or th */
    background-color: green;
}

如果您绝望，可以申请课程，但不是最佳解决方案。类只应用于区分不遵循模式的元素。

Answer 2

您可以使用tr:nth-child(1) { background-color: green; } tr:nth-child(2) { background-color: blue; } tr:nth-child(3) { background-color: red; } tr:nth-child(1):hover, tr:nth-child(2):hover, tr:nth-child(3):hover { /* Give whatever effect you want */ }选择器来实现您的目标。您也可以在https://css-tricks.com/almanac/selectors/n/nth-child/

了解相关信息

尝试这样的事情：

$("#EventDate").kendoDatePicker();
    <input id="EventDate" type="text" value="08/04/2017 "  name="EventDate" >

仅更改前三行数据表的颜色

2 个答案: