Question

代码：

<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>

<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>

我是否可以使用CSS来突出显示已更改的项目（在本例中为第2行的第1列）？或者我是否必须使用其他类似JavaScript的东西？

Answer 1

使用以下类：

<html>
<head>
<style type="text/css">
 .highlight{
    background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>

<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>

如果某些内容发生了变化，您可以将该类添加到特定元素中：

$(element).addClass('highlight');

或使用纯JavaScript：

element.class = 'highlight';

Answer 2

如果您正在询问如何突出显示第二行的第二列，那么这将起作用：

table > tr:nth-child(2) > td:nth-child(2) { background-color:#FFEEEE; }

如果您在任何地方询问如何突出显示已更改的行，请使用类。

将其添加到文档或样式表中。

<style> .highlight { background-color:#FFEEEE; }

将此添加到您的TD

class="highlight"

使用CSS突出显示HTML表格中的不同项目

2 个答案: