0

我有一张这样的桌子：

<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 脚本来比较每个单元格中的房间和 SOB。
- 如果 SOB 小于 Rooms，那么我将 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'});
    }
});

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

我错过了什么？

4

4 回答 4

2

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

尝试替换这两行：

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 内容是动态生成的）。

于 2013-02-14T17:20:01.367 回答
0

试试这个

$('#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'});
    }
});
于 2013-02-14T17:20:56.487 回答
0

试试这个，

var rooms = parseInt($(this).siblings('.rooms').text());
于 2013-02-14T17:23:10.517 回答
0

我认为您必须将文本解析为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()

于 2013-02-14T17:30:17.540 回答