我有一个由来自外部json的插件数据表创建的表，只是我需要在搜索中激活第一行的第一个td(更改颜色(，我已经尝试过一些函数调用，但它不起作用。谁能帮帮我。下面是我的代码。提前谢谢。
.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>
</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>
JAVASCRIPT
$( document ).ready(function() {
$('#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" }
]
});
);
成员.json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "brinjal",
"stargazerscount": 526,
"forkscount": "critical",
"description": "vagetables"
},
{
"name": "grapes",
"stargazerscount": 526,
"forkscount": "major",
"description": "fruits"
},
{
"name": "soap",
"stargazerscount": 526,
"forkscount": "major",
"description": "groceries"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
}
]
将代码添加到"draw"事件处理程序。在搜索时，这应该将第一个 tr 的 td 的背景颜色更改为绿色。
改变：
$('#example').DataTable( {
自：
var dtable = $('#example').DataTable( {
在 js 代码中添加以下内容：
dtable.on( 'draw', function () {
$('#example tbody tr').find('td:nth-child(1)').css('background-color', '');
if(dtable.search() != ""){
var row = dtable.row('tr:nth-child(1)').node();
$(row).find('td:nth-child(1)').css('background-color', 'green');
}
} );