Question

我有一张这样的表：

<table id="comparison">
    <tr>
        <th>Hotels</th>
        <th>Jan 2013</th>
        <th>Feb 2013</th>
    </tr>
    <tr>
        <td>Lorem Ipsum Hotel</td>
        <td>
            <div class="rooms">165</div>
            <div class="sob">352</div>
        </td>
        <td>
            <div class="rooms">215</div>
            <div class="sob">30</div>
        </td>
    </tr>
</table>

我准备了这个jQuery脚本来比较每个单元格中的Rooms和SOB - 如果SOB小于房间，则我将SOB颜色设为红色，表示结果为阴性 - 如果SOB大于Rooms，那么我将SOB颜色设为绿色以表示正面结果。

$('#comparison td .sob').each(function() {
    var rooms = $(this).prev().text();
    var sob = $(this).text();
    if (rooms > sob) {
        $(this).css({'color': 'red'});
    } else {
        $(this).css({'color': 'green'});
    }
});

问题是此脚本没有正确比较Rooms和SOB。它似乎在变量比较中随机运行，有时会产生正确的结果，有时则不会。

我错过了什么？

Answer 1

您正在使用文本值进行比较，而不是数值。

尝试替换这两行：

var rooms = $(this).prev().text();
var sob = $(this).text();

有了这个：

var rooms = parseInt($(this).prev().text(),10); // always use a radix
var sob = parseInt($(this).text(),10);

另一方面，如果可以的话，您可能希望在生成页面输出的代码中添加css类（当然也假设HTML内容是动态生成的）。

Answer 2

试试这个

$('#comparison td .sob').each(function() {
    var rooms = Number($(this).prev().html());
    var sob = Number($(this).html());
    if (rooms > sob) {
        $(this).css({'color': 'red'});
    } else {
        $(this).css({'color': 'green'});
    }
});

Answer 3

试试这个，

var rooms = parseInt($(this).siblings('.rooms').text());

Answer 4

我认为您必须将文本解析为int：

$('#comparison td .sob').each(function() {
  var rooms = Math.floor($(this).siblings().text());
  var sob = Math.floor($(this).text());
  if (rooms > sob) {
    $(this).css({'color': 'red'});
  } else {
    $(this).css({'color': 'green'});
  }
});

Math.floor()：我在某个地方读到它对parstInt()

表现的速度要快得多

jQuery没有在表格单元格中正确比较变量

4 个答案: