Как применить JQuery на всех строках таблицы?

Question

Вот мой код.этот код запускается с начальной загрузкой 10 строк.Когда я выбираю следующую строку, JS не работает на следующих рядах.кто-нибудь знает в чем проблема?Мне нужно работать на всех строках

$(function() {
  $('#customer_listing tr td:nth-child(4)').addClass(function() {
    var status = parseInt($(this).text(), 10) || 0;
    var qty = parseInt($(this).prev('td').text(), 10) || 0;
    return status > qty ? 'red' : 'green';
  });
});

.green {
  background-color: #0C0;
}
.red {
  background-color: #C00;
}

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table id="customer_listing" class="table table-striped table-bordered table-hover dataTable">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>qty</th>
    <th>status</th>
  </tr>
  <tr>
    <td>1</td>
    <td>s1</td>
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
   
</table>

Answer 1

Добавьте этот скрипт.

<script>
    $(document).ready(function() {
    var table = $('#customer_listing').DataTable({
        columnDefs: [
            { targets: 4, width: '100px' }
        ],
        createdRow: function(row, data, dataIndex){
        $('#customer_listing tr td:nth-child(5)').addClass(function() {
            var status = parseInt($(this).text(), 10) || 0;
            var qty = parseInt($(this).prev('td').text(), 10) || 0;
            return status < qty ? 'green' : status > qty ? 'red' : 'red';
          });

        }


    });
});

</script>

и удалите этот

$(function() {
  $('#customer_listing tr td:nth-child(4)').addClass(function() {
    var status = parseInt($(this).text(), 10) || 0;
    var qty = parseInt($(this).prev('td').text(), 10) || 0;
    return status > qty ? 'red' : 'green';
  });
});

Answer 2

На самом деле вы использовали table-striped класс в вашем теге table, который дает белый цвет каждой альтернативе td в каждой строке.Итак, здесь, в своем ответе, я удалил класс table-striped из тега table, и он работает отлично.Это точное решение на самом деле.

$(function() {
  $('#customer_listing tr td:nth-child(4)').addClass(function() {
    var status = parseInt($(this).text(), 10) || 0;
    var qty = parseInt($(this).prev('td').text(), 10) || 0;
    return status > qty ? 'red' : 'green';
  });
});

.green {
  background-color: #0C0;
}
.red {
  background-color: #C00;
}

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table id="customer_listing" class="table table-bordered table-hover dataTable">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>qty</th>
    <th>status</th>
  </tr>
  <tr>
    <td>1</td>
    <td>s1</td>
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
   
</table>

Answer 3

Просто добавьте !important в свой класс, table-striped переопределяет без него.

$(function() {
  $('#customer_listing tr td:nth-child(4)').addClass(function() {
    var status = parseInt($(this).text(), 10) || 0;
    var qty = parseInt($(this).prev('td').text(), 10) || 0;
    return status > qty ? 'red' : 'green';
  });
});

.green {
  background-color: #0C0 !important;
}

.red {
  background-color: #C00 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table id="customer_listing" class="table table-striped table-bordered table-hover dataTable">
  <tr>
    <th>id</th>
    <th>name</th>
    <th>qty</th>
    <th>status</th>
  </tr>
  <tr>
    <td>1</td>
    <td>s1</td>
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>
  <tr>
    <td>5</td>
    <td>s2</td>
    <td>4</td>
    <td>3</td>
  </tr>

</table>