предупреждение о входном значении keyup, если значение больше в таблицах данных

Question

У меня есть данные в таблице данных, где есть столбец ввода для ввода значения, которое необходимо заполнить, но у меня возникают проблемы, как добавить сценарий для проверки входного значения, которое не должно превышать значение запаса?

образец https://jsfiddle.net/dm6hao5v/9

var tbobat = $('#dt-obat-proses').DataTable({
          info: true,
          keys: true,
          language: {
              zeroRecords: "No records"
          },

           "columns": [
              { "data": "id", "sClass": "text-center" },
              { "data": "nama_obat", "sClass": "text-left" },
              { "data": "kd_obat", "sClass": "text-left" },
              { "data": "stock", "sClass": "text-center" },
              { "data": "satuan", "sClass": "text-center" }
           ],
            "columnDefs": [{
            "width": "5%",
            "targets": 0,
            'render': function(data, type, full, meta) {
                var cekObat = full.stock;
                return '<div class=""> <label><input type="checkbox" name="select_obat[]" ' + (cekObat == 0 ? "disabled" : "") + '  class="toggle" value="' + $('<div/>').text(data).html() + '"></label></div>';
            },
        },
        {
            "width": "40%",
            "targets": 1,
        },
        {
            "width": "15%",
            "targets": 2,
            "render": function(data, type, full, row, meta) {
                var cekObat = (full.stock == 0 ? "<label class='text-danger'>Stock Null</label>" : "");
                var stock = full.stock;
                if (type === 'display') {
                    data = '<input type="text" class="form-control add-jml" name="jumlah_obat[]" maxlength="4" max="' + stock + '"size="4" placeholder="" disabled> ' + cekObat;
                }
                return data;
            }
        },
        {
            "width": "20%",
            "targets": 3,
        },
        {
            "width": "20%",
            "targets": 4,
        }
    ]
});

$("#dt-obat-proses").on('change', '.toggle', function(e) {
   $(this).closest('tr').find(':text').not(this).prop('disabled',!this.checked);
   $(this).closest('tr').find(':text').not(this).prop('checked', false);
});

Answer 1

Решение 1 с использованием только jQuery: Мы сравниваем эти значения, выбирая текущего родителя первым, чтобы достичь следующей ячейки ', потому что у нас есть вход в ячейку, который сравнивается с текстом следующей ячейки () ,

$( document ).ready(function() {
var tbobat = $('#dt-obat-proses').DataTable({

    ajax: "https://api.myjson.com/bins/ynw4g",
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: false,
    scrollX: false,
    info: true,
    keys: true,
    language: {
        zeroRecords: "Tidak ada data"
    },

           "columns": [
              { "data": "id", "sClass": "text-center" },
              { "data": "nama_obat", "sClass": "text-left" },
              { "data": "kd_obat", "sClass": "text-left" },
              { "data": "stock", "sClass": "text-center" },
              { "data": "satuan", "sClass": "text-center" }
           ],
            "columnDefs": [{
            "width": "5%",
            "targets": 0,
            'render': function(data, type, full, meta) {
                var cekObat = full.stock;
                return '<div class=""> <label><input type="checkbox" name="select_obat[]" ' + (cekObat == 0 ? "disabled" : "") + '  class="toggle" value="' + $('<div/>').text(data).html() + '"></label></div>';
            },
        },
        {
            "width": "40%",
            "targets": 1,
        },
        {
            "width": "15%",
            "targets": 2,
            "render": function(data, type, full, row, meta) {
                var cekObat = (full.stock == 0 ? "<label class='text-danger'>Stock Null</label>" : "");
                var stock = full.stock;
                if (type === 'display') {
                    data = '<input type="text" class="form-control add-jml" name="jumlah_obat[]" maxlength="4" max="' + stock + '"size="4" placeholder="" disabled> ' + cekObat;
                }
                return data;
            }
        },
        {
            "width": "20%",
            "targets": 3,
        },
        {
            "width": "20%",
            "targets": 4,
        }
    ]
});

$("#dt-obat-proses").on('change', '.toggle', function(e) {
   $(this).closest('tr').find(':text').not(this).prop('disabled',!this.checked);
   $(this).closest('tr').find(':text').not(this).prop('checked', false);
});
$('#dt-obat-proses').on('keyup change','.add-jml',function(){
if($(this).val()>parseInt($(this).parent().next().text())){
		$(this).css({'border':'2px solid red'});
} else{
$(this).css({'border':'2px solid green'});
}
});
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<table id="dt-obat-proses" class="table table-striped table-bordered" width="100%">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th class="text-center">Nama Obat</th>
            <th class="text-center">Jumlah</th>
            <th class="text-center">Stock</th>
            <th class="text-center">Satuan</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Решение 2 с использованием синтаксиса Datatables cell () и data () APi: Это почти такой же способ найти следующую ячейку, но с другой синтаксис для его выбора и получения его значения.

tbobat.cell( $(this).parent().next() ).data();

Поскольку мы не делаем ничего, кроме изменения стиля, я переместил условие для использования в toggleClass () Метод.

$( document ).ready(function() {
var tbobat = $('#dt-obat-proses').DataTable({

    ajax: "https://api.myjson.com/bins/ynw4g",
    paging: true,
    lengthChange: true,
    searching: true,
    ordering: false,
    scrollX: false,
    info: true,
    keys: true,
    language: {
        zeroRecords: "Tidak ada data"
    },

           "columns": [
              { "data": "id", "sClass": "text-center" },
              { "data": "nama_obat", "sClass": "text-left" },
              { "data": "kd_obat", "sClass": "text-left" },
              { "data": "stock", "sClass": "text-center" },
              { "data": "satuan", "sClass": "text-center" }
           ],
            "columnDefs": [{
            "width": "5%",
            "targets": 0,
            'render': function(data, type, full, meta) {
                var cekObat = full.stock;
                return '<div class=""> <label><input type="checkbox" name="select_obat[]" ' + (cekObat == 0 ? "disabled" : "") + '  class="toggle" value="' + $('<div/>').text(data).html() + '"></label></div>';
            },
        },
        {
            "width": "40%",
            "targets": 1,
        },
        {
            "width": "15%",
            "targets": 2,
            "render": function(data, type, full, row, meta) {
                var cekObat = (full.stock == 0 ? "<label class='text-danger'>Stock Null</label>" : "");
                var stock = full.stock;
                if (type === 'display') {
                    data = '<input type="text" class="form-control add-jml" name="jumlah_obat[]" maxlength="4" max="' + stock + '"size="4" placeholder="" disabled> ' + cekObat;
                }
                return data;
            }
        },
        {
            "width": "20%",
            "targets": 3,
        },
        {
            "width": "20%",
            "targets": 4,
        }
    ]
});
tbobat.on('change', '.toggle', function(e) {
   $(this).closest('tr').find(':text').not(this).prop('disabled',!this.checked);
   $(this).closest('tr').find(':text').not(this).prop('checked', false);
});
tbobat.on('keyup change','.add-jml',function(){
var inpStock=$(this).val();
var fStock=tbobat.cell( $(this).parent().next() ).data();
var cond=Boolean(parseInt(inpStock)>parseInt(fStock));
$(this).toggleClass("error", cond).toggleClass("ok", !cond);
});
});

.ok{
border:2px solid green;
}
.error{
border:2px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<table id="dt-obat-proses" class="table table-striped table-bordered" width="100%">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th class="text-center">Nama Obat</th>
            <th class="text-center">Jumlah</th>
            <th class="text-center">Stock</th>
            <th class="text-center">Satuan</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>