Question

我有一张桌子

<div class="container">
    <div class="row">
      <table id="mytable">
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Item 1</td>
                <td>$99</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Item 2</td>
                <td>$200</td>
            </tr>
        </tbody>
      </table>
    </div>
</div>

如果列项目价格的值低于100，则我想执行检查，在tr中添加class="warning。

<tr class="warning">
 <td>1</td>
 <td>Item 1</td>
 <td>$99</td>
</tr>

我怎么能用jquery做这个我对jquery知之甚少，直到现在我的try都没有成功。

$('#mytable tr/* how i check here <100*/ ').addClass('warning');

Answer 1

您可以在此处使用 filter() ，

filter() ：对于每个元素，如果函数返回true（或“truthy”值），该元素将包含在过滤集中;否则，它将被排除在外。（摘自http://api.jquery.com/filter/）

$('tbody tr').filter(function() {
  return $('td:eq(2)', this)
    // get 3rd column using :eq(), :nth-child , :last or :last-child
    .text()
    // get text content
    .substr(1) * 1 < 100;
  // get number value from string by avoiding $ and compare
  // if it includes , then use txt.replace(/[,$]/g,'')
  // use parseInt(txt,10) for converting to integer
}).addClass('warning');

.warning {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <table id="mytable">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$99</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$200</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

你最好的选择是编码，而不是试图找到一些模糊或自定义选择器：

$("#mytable tr").each(function() {
    var val = $("td", this)[2].text().substr(1) * 1;
    if (val < 100) 
        $(this).addClass("warning");
});

就个人而言，我通过添加一个类（名称无关紧要）来使其比依赖列排序更易于维护：

<tr> 
  <td>1</td>
  <td>Item 1</td>
  <td class='data-value'>$99</td>
</tr>

然后：

$("#mytable tr").each(function() {
    var val = $("td.data-value", this).text().substr(1) * 1;
    if (val < 100) 
        $(this).addClass("warning");
});

修改已添加.substr(1)，.text()将提供包含“$”的值，然后*1将其作为数字。您可以改为使用parse int并记住将其设置为10。

Answer 3

使用过滤器：

http://api.jquery.com/filter/

您还需要正则表达式从数字中剥离货币。

然后抓住最近的TR并申请上课。

http://jsfiddle.net/SeanWessell/g6uz2Lfx/

$('#mytable tr td:nth-child(3)').filter(function () {
    var amt = parseFloat($(this).text().replace(/[$,]+/g, ""));
    return (amt < 100);
}).closest('tr').addClass('warning');

在条件下在tr中添加css类

3 个答案: