Question

我来自@Stofke（original jsfiddle）的一个脚本，用于在HTML表格上使用JQuery进行条件格式化。

我一直在尝试调整这个脚本，以便分数基于隐藏的表单字段（见下文），但是当我这样做时，我只会显示一种颜色，而不是不同的颜色标度。

$(function() {
    $('tr> td').each(function(index) {
        var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
        var score = $('input.sf').val();
        for (var i = 0; i < scale.length; i++) {
            if (score <= scale[i][1]) {
                $('input.sf').closest('tr').addClass(scale[i][0]);
            }
        }
    });
});

我确信这是一个菜鸟错误，但如果有人可以请将错误指出给我，这将是非常好的。

HTML表格结构

<table>
    <col id="name" />
    <col id="score" />
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Allan, Paul</td>
            <td><input type="hidden" class="sf" value="5"></td>
        </tr>
        <tr>
            <td>Bartlett, James</td>
            <td><input type="hidden" class="sf" value="60"></td>
        </tr>
        <tr>
            <td>Callow, Simon</td>
            <td><input type="hidden" class="sf" value="35"></td>
        </tr>
        <tr>
            <td>Dennis, Mark</td>
            <td><input type="hidden" class="sf" value="289"></td>
        </tr>
        <tr>
            <td>Ennals, Simon</td>
            <td><input type="hidden" class="sf" value="1020"></td>
        </tr>
        <tr>
            <td>Finnegan, Seamus</td>
            <td><input type="hidden" class="sf" value="5648"></td>
        </tr>
    </tbody>
</table>

Answer 1

您的问题出在以下几行：

var score = $('input.sf').val();

获取第一个<input>元素的值为“sf”的类。我假设你每行都有这样一个元素。你需要得到一行，而不是第一行。

以下内容可能有效，但它假定<input>元素是<td>元素的后代。如果这不正确，您可能需要稍微更改一下。

var score = $(this).find('input.sf').val();

这是jsfiddle，其他一些更改。

Answer 2

这是你想要做的事情：

$(function() {
$('tr> td:odd').each(function(index) {//added back the :odd selector
    var scale = [['vPoor', 10], ['poor', 50], ['avg', 250], ['good', 1250], ['vGood', 6250]];
    var score = $(this).html();//referenced this instead of input.sf
    for (var i = 0; i < scale.length; i++) {
        if (score <= scale[i][1]) {
            $(this).closest('tr').addClass(scale[i][0]);//referenced this instead of input.sf
        }
    }
});
});

基于隐藏字段的JQuery条件格式

2 个答案: