Question

我在表格中有两个变量。

<table>
<tr>
<td class="cell1">10</td><td class="cell2">5</td>
</tr>
</table>

现在我想说，如果.cell2中的数字小于.cell1中的数字，则更改.cell2红色的颜色。

Answer 1

使用.text获取每个单元格的内容。使用parseInt或parseFloat转换为数字，并使用.toggleClass添加或删除一些有条件地应用必需样式的CSS类：

var isSmaller=parseInt($(".cell2").text(),10) < parseInt($(".cell1").text(),10);
$(".cell2").toggleClass("red", isSmaller);

在这个例子中，我假设这个额外的CSS：

.red { background-color: red }

Answer 2

您可以使用text（）运算符获取内部文本的字符串值：

cell10 = $('.cell10').text();
cell2  = $('.cell2').text();

然后使用parseInt函数：

if (parseInt(cell10) > parseInt(cell2)) {
    ...
}

编辑 Jon打败了我

Answer 3

这是一个fiddle及相关部分：

function doStuff() {
   var $v1 = $('.cell1').text();
   var $v2 = $('.cell2').text();   

   /* debug output */
   $('#result').text("result: v1: " + $v1 + ", v2: " + $v2);

   if (parseInt($v1, 10) > parseInt($v2, 10)) {
       $('.cell2').css("background-color", "red");

       /* debug output */
       $('#result').append("</br> cell1 > cell2 == true");
    }        
}

$(document).ready(function() {
    doStuff();
 });

if else有2个文本变量

3 个答案: