用jquery

时间：2018-04-19 19:27:52

标签： jquery html

我是jQuery的初学者，并坚持不懈。我希望有人能帮助我。

我想要更改特定<td>中所有<tr>的值的颜色。 <tr>是剩下的天数。如果值为＆lt;我希望将特定<td>中的所有<tr>值设为红色。如果值> 0，则使其变为绿色。 0。我已经尝试了很多，只能让第一个TD成为绿色。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $('tr').each(function() {
    if ($(this).find('td').text().trim() > "0") {
      $('#tt').css('color', 'green');
    } else {
      $('#tt').css('color', 'red');
    }
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" class="table table-striped table-bordered dataex-res-configuration">
  <thead>
    <tr>
      <th data-class="expand">Days Left</th>
      <th data-hide="phone">Book Title</th>
      <th data-hide="tablet,phone">Card No:</th>
      <th data-hide="tablet,phone">Card Owner</th>
      <th data-hide="tablet,phone">Quantity Rented</th>
      <th data-hide="tablet,phone">Rented Date</th>
      <th data-hide="tablet,phone">Due Date</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

抱歉没有正确阅读：D编辑了jquery

您可以使用第一胎选择器

jQuery( "#main td:first-child" ).css('','');

first-child selector

＆＃13;
＆＃13; 
$(document).ready(function(){ 
    $('#main td:first-child').each(function(){
        if(parseInt($(this).text()) < 0){
            $(this).css('color','red');
        }else{
            $(this).css('color','green');  
        }
    });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" class="table table-striped table-bordered dataex-res-configuration">
  <thead>
    <tr>
      <th data-class="expand">Days Left</th>
      <th data-hide="phone">Book Title</th>
      <th data-hide="tablet,phone">Card No:</th>
      <th data-hide="tablet,phone">Card Owner</th>
      <th data-hide="tablet,phone">Quantity Rented</th>
      <th data-hide="tablet,phone">Rented Date</th>
      <th data-hide="tablet,phone">Due Date</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="tt">-1</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
    <tr>
      <td id="tt">121344534</td>
      <td>the Great Gatsby</td>
      <td>34ABDSFS3332</td>
      <td>James Carter</td>
      <td>15</td>
      <td>12-4-2018</td>
      <td>13-4-2019</td>
      <td>
        <a data-toggle="modal" data-target="#editRentBookModel">
          <i class="la la-edit"></i>
          <a data-toggle="modal" data-target="#viewRentBookModel">
            <i class="la la-eye"></i>
            <a data-toggle="modal" data-target="#confirmDeleteModel">
              <i class="la la-
                        la-trash"></i>
      </td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

- 修改后的代码段 -

相关问题
最新问题