如何在DataTable搜索时将首行首个TD设为激活状态（变色）

我明白你想要实现的效果：每次执行搜索操作后，把结果表格首行的第一个<td>设置为激活状态（改变颜色）。问题出在DataTable在搜索时会重新渲染表格内容，所以你需要监听表格的绘制完成事件，在每次搜索后重新应用样式。

下面是具体的解决步骤和修改后的代码：

步骤1：添加激活状态的CSS样式 #

首先在你的<style>标签里定义激活单元格的样式，你可以根据需求调整颜色和样式：

.active-cell {
    color: #dc3545; /* 红色示例，可替换成你需要的颜色 */
    font-weight: bold; /* 可选，增强视觉突出效果 */
}

步骤2：监听DataTable的绘制事件 #

DataTable每次搜索、分页或者排序后都会触发draw.dt事件，我们可以在这个事件里去设置首行第一个单元格的激活状态。需要注意先移除之前的激活样式，避免多个单元格残留样式。

修改你的JavaScript代码，添加事件监听：

$( document ).ready(function() {
    // 初始化DataTable并保存实例
    var table = $('#example').DataTable( {
        language: {
            searchPlaceholder: "Search records"
        },
        "ajax": {
            "type" : "POST",
            "url": "http://localhost/members.json",
            "dataSrc": function (json) {
                var return_data = new Array();
                for(var i=0;i< json.length; i++){
                    return_data.push({
                        'name': json[i].name,
                        'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
                        'forkscount' : json[i].forkscount,
                        'description' : json[i].description
                    })
                }
                return return_data;
            }
        },
        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }
        ]
    });

    // 监听表格绘制完成事件（搜索、分页、排序后都会触发）
    table.on('draw.dt', function() {
        // 先清除所有已有的激活样式
        $('#example tbody tr td.active-cell').removeClass('active-cell');
        // 找到首行第一个单元格，添加激活样式
        var firstTargetTd = $('#example tbody tr:first-child td:first-child');
        if (firstTargetTd.length > 0) {
            firstTargetTd.addClass('active-cell');
        }
    });

    // 页面初始化完成后，默认给首行第一个单元格设置激活样式
    table.on('init.dt', function() {
        $('#example tbody tr:first-child td:first-child').addClass('active-cell');
    });
});

为什么之前的尝试没生效？ #

因为DataTable在搜索时会动态销毁并重新创建表格的tbody内容，如果你只是在初始化时设置一次样式，搜索后新渲染的单元格并不会继承这个样式。通过监听draw.dt事件，每次表格重新绘制（包括搜索、分页、排序）时，我们都能重新定位到目标单元格并应用样式。

完整的HTML代码（包含样式） #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<style>
.active-cell {
    color: #dc3545;
    font-weight: bold;
}
</style>
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>

这样修改后，每次搜索（或者分页、排序）后，结果表格的首行第一个单元格都会被设置为激活状态，样式会按照你定义的CSS生效。

内容的提问来源于stack exchange，提问作者A prasad