Javascript, получить входное значение в преддверии

1

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

Я огляделся и попробовал ответы отсюда здесь, здесь и здесь, а также другие, и никто, похоже, не работает для меня.

$(".calibration_input_lin").blur(function(){
  var input = $(this)
  var val = input.val()
  var row = input.parents('tr').eq(0)

  var req = input.closest('td').prev().val()
  var res = $(".resolution").data("resolution")


  var diff = difference = val - req
  var diff = diff.toFixed(res)

  $.ajax({
    url: "<%= customer_asset_calibration_header_path(@customer,@asset,@calibration_header) %>",
    data: { value: val }

  }).done(function( response ) {
    row.find(".calibration_lin_input_diff").text(diff)
    window.alert(req);
  });

  // or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
        <thead>
          <tr>
            <th>Weights</th>
            <th>Required</th>
            <th>Actual</th>
            <th>Difference</th>
            <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
        </tbody>
        <table>

Я использую тот же скрипт в другом месте, и он отлично работает, когда переменная req статична по всем строкам таблицы. Я просто не могу заставить его забрать вход в td 2.

Любая помощь будет оценена по достоинству.

  • 2
    var row = input.closest('tr')
  • 0
    Привет, почему ты используешь $(".calibration_input_lin").blur ? Как я понимаю, вам нужно перебирать все строки и вычислять разницу между первыми 2 полями в строке?
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ

Вместо использования blur вы можете использовать input. Вы можете настроить таргетинг на родительский элемент, чтобы получить входное значение prev() td при каждом изменении ввода.

Вы должны установить начальное значение как 0 когда на input нет значения. Вы можете сделать это, используя тернарный оператор.

В HTML не содержится элемента с .resolution, данные которого используются в toFixed().

Вы можете попробовать следующее:

$(".calibration_input_lin").on('input', function(){
  var input = $(this)
  var val = input.val()? input.val() : 0;
  var row = input.parents('tr').eq(0)

  var req = input.parents('td').prev('td').find('input').val();
  req = req ? req : 0;
  //var res = $(".resolution").data("resolution")

  var diff = val - req;
  var diff = diff.toFixed(2);

  $(this).parents('tr').find('.calibration_lin_input_diff').text(diff);

  // or you can run some JS code here to calculate difference
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
        <thead>
          <tr>
            <th>Weights</th>
            <th>Required</th>
            <th>Actual</th>
            <th>Difference</th>
            <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
        </tbody>
        <table>
  • 0
    Когда я добавляю строку <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> на мою страницу, она отключает форматирование для выбранный селектор, который находится в 1-й тд - ты видел это? Кроме того, в первом TD также вход повлияет на ваш ответ?
  • 0
    @ChrisNash, нет ничего внутри первого td .....
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню