Сравнение значений input в таблице

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2023

Есть таблица состоящая из input, в них записаны value в виде чисел, но как строчные элементы. Нужно в каждой строке таблицы сравнить друг с другом значения двух ячеек, "bill" и "payment". Если "payment" < "bill", то к input.payment добавляется класс, в остальных случаях класс убирается. Помогите пожалуйста, не могу грамотно написать решение на jquery.

// Код который сейчас работает с таблицей
document.addEventListener("DOMContentLoaded", function() {
  $("tbody").each(function(elem, index) {
    let arr = $.makeArray($("tr", this).detach());
    arr.reverse();
    $(this).append(arr);
  });
});

document.addEventListener("DOMContentLoaded", function() {
  $("tbody .payment").each(function() {
    if (!$(this).val() || $(this).val() == 0) {
      $(this).addClass("empty");
    } else {
      $(this).removeClass("empty");
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody id="tbody">
  <tr id="tr">
    <form action="#">
      <td><input class="id" name="id" type="text" value="199"></td>
      <td><input class="date" name="date" type="text" value="2023-01-28 15:35:46"></td>
      <td><input class="name" name="name" type="text" value="NA"></td>
      <td><input class="where_from" name="where_from" type="text" value="NA"></td>
      <td><input id="bill" class="bill" name="bill" type="text" value="4820"></td>
      <td><input id="payment" class="payment" name="payment" type="text" value="4820"></td>
      <td><input name="number_of_prints" type="text" value="4"></td>
      <td><input name="cost_of_production" type="text" value="1720"></td>
      <td><input name="spoilage" type="text" value=""></td>
      <td><input name="size" type="text" value="А3"></td>
      <td><input name="tow" type="text" value="DTF"></td>
      <td><input name="profit" type="text" value="3100" disabled=""></td>
      <td><input name="comment" type="text" value=""></td>
      <td><a class="delete_btn btn" href="?delete=199">Удалить</a></td>
      <td><button id="btn" class="update_btn btn">Обновить</button></td>
    </form>
  </tr>
  <tr id="tr">
    <form action="#">
      <td><input class="id" name="id" type="text" value="198"></td>
      <td><input class="date" name="date" type="text" value="2023-01-28 15:27:33"></td>
      <td><input class="name" name="name" type="text" value="NA"></td>
      <td><input class="where_from" name="where_from" type="text" value="NA"></td>
      <td><input id="bill" class="bill" name="bill" type="text" value="6075"></td>
      <td><input id="payment" class="payment" name="payment" type="text" value="6075"></td>
      <td><input name="number_of_prints" type="text" value="27"></td>
      <td><input name="cost_of_production" type="text" value="1944"></td>
      <td><input name="spoilage" type="text" value="130"></td>
      <td><input name="size" type="text" value=""></td>
      <td><input name="tow" type="text" value="Кружки"></td>
      <td><input name="profit" type="text" value="4001" disabled=""></td>
      <td><input name="comment" type="text" value=""></td>
      <td><a class="delete_btn btn" href="?delete=198">Удалить</a></td>
      <td><button id="btn" class="update_btn btn">Обновить</button></td>
    </form>
  </tr>
</tbody>

Ответы

▲ 0Принят

Нужно в каждой строке таблицы сравнить друг с другом значения двух ячеек, "bill" и "payment". Если "payment" < "bill", то к input.payment добавляется класс, в остальных случаях класс убирается.

Предложу такой вариант...

$(_ => {
  $('.payment').each(function(){
    const p = +this.value
    const b = +$(this).parent().parent().find('.bill').val()
    console.log(p, b)
    if (p < b) $(this).addClass('ok')
    else $(this).removeClass('ok')
  })
})
.ok {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody id="tbody">
  <tr id="tr">
    <form action="#">
      <td><input class="id" name="id" type="text" value="199"></td>
      <td><input class="date" name="date" type="text" value="2023-01-28 15:35:46"></td>
      <td><input class="name" name="name" type="text" value="NA"></td>
      <td><input class="where_from" name="where_from" type="text" value="NA"></td>
      <td><input id="bill" class="bill" name="bill" type="text" value="4820"></td>
      <td><input id="payment" class="payment" name="payment" type="text" value="4800"></td>
      <td><input name="number_of_prints" type="text" value="4"></td>
      <td><input name="cost_of_production" type="text" value="1720"></td>
      <td><input name="spoilage" type="text" value=""></td>
      <td><input name="size" type="text" value="А3"></td>
      <td><input name="tow" type="text" value="DTF"></td>
      <td><input name="profit" type="text" value="3100" disabled=""></td>
      <td><input name="comment" type="text" value=""></td>
      <td><a class="delete_btn btn" href="?delete=199">Удалить</a></td>
      <td><button id="btn" class="update_btn btn">Обновить</button></td>
    </form>
  </tr>
  <tr id="tr">
    <form action="#">
      <td><input class="id" name="id" type="text" value="198"></td>
      <td><input class="date" name="date" type="text" value="2023-01-28 15:27:33"></td>
      <td><input class="name" name="name" type="text" value="NA"></td>
      <td><input class="where_from" name="where_from" type="text" value="NA"></td>
      <td><input id="bill" class="bill" name="bill" type="text" value="6075"></td>
      <td><input id="payment" class="payment" name="payment" type="text" value="6075"></td>
      <td><input name="number_of_prints" type="text" value="27"></td>
      <td><input name="cost_of_production" type="text" value="1944"></td>
      <td><input name="spoilage" type="text" value="130"></td>
      <td><input name="size" type="text" value=""></td>
      <td><input name="tow" type="text" value="Кружки"></td>
      <td><input name="profit" type="text" value="4001" disabled=""></td>
      <td><input name="comment" type="text" value=""></td>
      <td><a class="delete_btn btn" href="?delete=198">Удалить</a></td>
      <td><button id="btn" class="update_btn btn">Обновить</button></td>
    </form>
  </tr>
</tbody>