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

可以使用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>