解析行元素并向 href 元素添加样式

Question

我得到以下HTML表格：

<tbody>
<tr role="row" class="odd">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">dsdsdsds</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
</tr>
<tr class="unread even" role="row">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">aa</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td></tr> 
</tbody>

此表是通过数据表创建的：

$('#datatable-table').DataTable({
"bFilter": false,
"bInfo": false ,
"bPaginate": false,
"bSort": false,
"bAutoWidth" : true,
ajax: 'Getdata?user='+Glogin,
columns: [
{   "data":"checkbox"
},
{ "data": "two" },
{ "data": "three" },
{ "data": "four" },
{ "data": "five" },
{ "data": "six" }
],
"aaSorting": [[ 5, "desc" ]],
createdRow: function (row, data, index) {
console.log("row"+row);
console.log("data 8: "+data["read"]);
if (data["read"] == "0") {
console.dir(row);
$(row).addClass("unread");
}
}
});

函数createdRow正在获取在我的表中创建的每一行，我想解析元素$(row(以在href元素上添加特定样式。 如何解析行的元素并将此特定样式标签添加到我的 href 元素中？

最后有：

<a id="link" href="detail.jsp" style="color: red">Nicolas COPERNIC</a>

Answer 1

在表上找到a并添加如下所示css。

$('table tr.unread').find('a').css({
"color": "red"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr role="row" class="odd">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">dsdsdsds</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
</tr>
<tr class="unread even" role="row">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">aa</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td>
</tr>
</tbody>
</table>

另一种方法是您可以使用attr.

$('table tr.unread td').find('a').attr( "style", "color:red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr role="row" class="odd">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">dsdsdsds</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 17:41</a></td>
</tr>
<tr class="unread even" role="row">
<td></td>
<td><a id="link" href="detail.jsp">Nicolas COPERNIC</a></td>
<td><a id="link" href="detail.jsp">aa</a></td>
<td></td>
<td><a id="link" href="detail.jsp">2018-06-14 07:57</a></td>
</tr>
</tbody>
</table>

注意：您可以在绑定DataTable后执行此操作。