Question

我正在构建其中一个html表，比较不同的定价选项及其包含的功能，例如：

<table>
<tr><th></th><th>free</th><th>lite</th></tr>
<tr><th>Example feature</th><th>✘</th><th>✔</th>
</table>

我想尝试绿色的所有刻度，所有的红色检查。我认为最好的方法可能是在javascript或jquery中使用onload，根据每个表格单元格中的符号设置所有css属性。

这是最有效的方法吗？如果是这样，有人可以就我的方式提供指导：

识别页面上每个特定符号的出现次数。
在页面加载时为每个匹配项设置CSS属性。

非常感谢！

Answer 1

您可以使用JavaScript或jQuery，但我没有看到任何合理的理由，除非您想稍后动态更改内容。您可以设置具有x或签入的每个元素的类，并使用普通的旧CSS。

HTML：

<table>
<tr><th></th><th>free</th><th>lite</th></tr>
<tr><th>Example feature</th><th class="x">✘</th><th class="check">✔</th>
</table>

.x {
    color: red;
}

.check {
    color: green;
}

Answer 2

设置它就像你在任何元素上设置颜色一样，用某些东西定位它并用css()设置颜色

$('th:contains(✘)').css('color','red');
$('th:contains(✔)').css('color','green');

FIDDLE

或

$('th').css('color', function() {
    return $(this).text().indexOf('✘') != -1 ? 'red' : 
           $(this).text().indexOf('✔') != -1 ? 'green' : '';
});

FIDDLE

Answer 3

而不是写✘，写

<span class='x-highlight'>✘</span>

或之后，

html = html.replace("✘", "<span class='x'>✘</span>");

Answer 4

看看我创建的JSFiddle。这可以通过简单的CSS完成，但您要求使用jQuery / JavaScript。

HTML：

<table>
    <tr>
        <th></th>
        <th>free</th>
        <th>lite</th>
    </tr>
    <tr>
        <th>Example feature</th>
        <th class="cross">✘</th>
        <th class="check">✔</th>
</table>

jQuery的：

$(document).ready(function(){
    $('.cross').css('color', 'red');
    $('.check').css('color', 'green');
});

Answer 5

只需使用绿色图像作为勾选和红色图像进行检查......这里不需要变得复杂：）

如果您不想这样做，那么只需在封闭检查或交叉的<th>上执行class =“cross”，class =“check”，然后在该类中适当地设置文本颜色。 ..或者你甚至可以直接用这种风格来做。

将所有“✔”符号设置为绿色，将所有“✘”符号设置为红色

5 个答案: