Javascript，在上一个td中获取输入值

Question

我有一个表，每行有两个输入，我正在尝试计算该行每个输入之间的差异，并将其显示在第 3 列中。

我环顾四周并尝试了来自 Here , here , here和 here以及其他人，似乎没有人适合我。

$(".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 中的输入。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用input 而不是使用blur。您可以将父级定位为在每次输入更改时获取 prev() td 的输入值。

当输入中没有值时，您必须将初始值设置为0。您可以使用三元运算符来做到这一点。

在 toFixed() 中使用其数据的 HTML 中没有带有 .resolution 的元素。

您可以尝试以下方式:

$(".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>