如何逐行获取html表值并对值进行一些计算？

Question

如何逐行获取第一个表值并将这些值显示在动态创建的表 2 中具有相同名称的行中。

我逐行获得了第一个表值，我无法在表中逐行显示这些值。在表 2 中，它显示了最后一行的值，它不能在下一行插入值，但它可以覆盖第一行的值。

$(document).ready(function() {

  $("#tbUser").on('click', '.btnDelete', function() {

    var idx = $(this).closest('tr').index();

    $("#tbUser").find("tr").eq(idx).remove();
    $("#tbUsers").find("tr").eq(idx - 1).remove();
  });



  $("#tbUser").on('click', '.btnAdd', function() {

    $("#tbUser").append("<tr class='item'><td>Pad</td><td id='selection'>0.000307</td><td><input type='text' name='BottomHoleRate' id='BottomHoleRate'></td><td><input type='text' name='CleanVolume' id='CleanVolume'></td><td><input type='text' name='BottomHoleConcentration' id='BottomHoleConcentration'></td><td>v 2.2</td><td><input type='text' name='Chemvol' id='Chemvol'></td><td><button class='btnAdd'>Add</button></td><td><button class='btnDelete'>Delete</button></td></tr>");
    $("#tbUsers").append("<tbody><tr><td><input type='text' name='StageTime' id='StageTime' value=''></td><td><input type='text' name='SlurryRate' id='SlurryRate'></td><td><input type='text' name='CleanRate' id='CleanRate'></td><td><input type='text' name='BlenderConcentration' id='BlenderConcentration'></td><td><input type='text' name='ProppantVolumeRate' id='ProppantVolumeRate'></td><td><input type='text' name='ProppantMassRate' id='ProppantMassRate'></td><td><input type='text' name='ProppantAVG' id='ProppantAVG'></td><td><input type='text' name='ProppantStageMass' id='ProppantStageMass'></td><td><input type='text' name='ProppantCumulativeMass' id='ProppantCumulativeMass'></td><td><input type='text' name='ProppantVolume' id='ProppantVolume'></td><td><input type='text' name='ProppantCumulativeVolume' id='ProppantCumulativeVolume'></td><td><input type='text' name='SlurryStageVolume' id='SlurryStageVolume'></td><td><input type='text' name='SlurryCumulativeVolume' id='SlurryCumulativeVolume'></td></tr></tbody>");

    $("#tbUsers2").append("<tr><td>Pad</td></tr>");
    $("#tbUsers3").append("<tr><td>Pad</td></tr>");

  });
});


$('button').on('click', function() {

  $("tr.item").each(function() {
    var BottomHoleRate = $(this).find("input[name='BottomHoleRate']").val(),
      CleanVolume = $(this).find("input[name = 'CleanVolume']").val();
    bhc = $(this).find("input[name = 'BottomHoleConcentration']").val();
    Chemvol = $(this).find("input[name = 'Chemvol']").val();
    // SlurryStageVolume=document.getElementById('SlurryStageVolume').value;

    SlurryRate = BottomHoleRate;
    blenderconcentration = bhc;
    ProppantAVG = document.getElementById('selection').innerText;

    proppant_stage_mass = CleanVolume * bhc;
    pro_cum_mass = proppant_stage_mass;
    proppant_vol = proppant_stage_mass * ProppantAVG;
    pro_cum_vol = proppant_vol;
    slurry_stage_vol = CleanVolume * (1 + ProppantAVG * bhc);

    slurry_cum_vol = slurry_stage_vol;

    cleanrate = SlurryRate / (1 + ProppantAVG + bhc);
    stage = slurry_stage_vol / SlurryRate;

    proppant_vol_rate = cleanrate * bhc * ProppantAVG;
    proppant_mass_rate = cleanrate * bhc;
    chem_rate1 = Chemvol * cleanrate;
    chem_vol = Chemvol * CleanVolume;
    document.getElementById('StageTime').value = stage;
    document.getElementById('SlurryRate').value = SlurryRate;
    document.getElementById('CleanRate').value = cleanrate;
    document.getElementById('BlenderConcentration').value = blenderconcentration;
    document.getElementById('ProppantVolumeRate').value = proppant_vol_rate;
    document.getElementById('ProppantMassRate').value = proppant_mass_rate;
    document.getElementById('ProppantAVG').value = ProppantAVG;
    document.getElementById('ProppantStageMass').value = proppant_stage_mass;
    document.getElementById('ProppantCumulativeMass').value = pro_cum_vol;
    document.getElementById('ProppantVolume').value = proppant_vol;
    document.getElementById('ProppantCumulativeVolume').value = pro_cum_vol;
    document.getElementById('SlurryStageVolume').value = slurry_stage_vol;
    document.getElementById('SlurryCumulativeVolume').value = slurry_cum_vol;
  });
});

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
  <table id="tbUser" class="tblUser" name="tblUser">
    <tr>
      <td><button class="btnDelete">Delete</button></td>
      <td><button class="btnAdd">Add</button></td>
    </tr>
    <tr>
      <th>Stage Name</th>
      <th>Proppant Selection</th>
      <th>Bottom Hole Rate</th>
      <th>Clean Volume</th>
      <th>Bottom Hole Concentration</th>
      <th>Quality</th>
      <th>Chem 1 Vol/Vol</th>
    </tr>
  </table>

  <h2>table 2</h2>
  <table id="tbUsers">
    <tr>
      <th>Stage Time (min)</th>
      <th>Slurry Rate</th>
      <th>Clean Rate</th>
      <th>Blender Concentration</th>
      <th>Proppant Volume Rate</th>
      <th>Proppant Mass Rate</th>
      <th>Proppant AVG</th>
      <th>Proppant Stage Mass</th>
      <th>Proppant Cumulative Mass</th>
      <th>Proppant Volume</th>
      <th>Proppant Cumulative Volume</th>
      <th>Slurry Stage Volume</th>
      <th>Slurry Cumulative Volume</th>
    </tr>
  </table>

  <h2>table 3</h2>
  <table id="tbUsers2">
    <tr>
      <th>Chem rate 1</th>
    </tr>
  </table>

  <h2>table 4</h2>
  <table id="tbUsers3">
    <tr>
      <th>Chem Volume 1</th>
    </tr>
  </table>

  <input type="button" name="submit" value="submit" />
  <button>submit</button>

Answer 1

我猜问题是您有重复的 ID。 ID 应该是唯一的，并且只能在页面上使用一次。您应该将它们替换为像这样的 classes（在添加它们时）：

$("#tbUsers").append("<tbody><tr><td><input type='text' name='StageTime' class='StageTime' value=''></td><td><input type='text' name='SlurryRate' class='SlurryRate'></td><td><input type='text' name='CleanRate' class='CleanRate'></td><td><input type='text' name='BlenderConcentration' class='BlenderConcentration'></td><td><input type='text' name='ProppantVolumeRate' class='ProppantVolumeRate'></td><td><input type='text' name='ProppantMassRate' class='ProppantMassRate'></td><td><input type='text' name='ProppantAVG' id='ProppantAVG'></td><td><input type='text' name='ProppantStageMass' class='ProppantStageMass'></td><td><input type='text' name='ProppantCumulativeMass' class='ProppantCumulativeMass'></td><td><input type='text' name='ProppantVolume' class='ProppantVolume'></td><td><input type='text' name='ProppantCumulativeVolume' class='ProppantCumulativeVolume'></td><td><input type='text' name='SlurryStageVolume' class='SlurryStageVolume'></td><td><input type='text' name='SlurryCumulativeVolume' class='SlurryCumulativeVolume'></td></tr></tbody>");

那么你应该像这样填写值

document.getElementsByClassName('SlurryRate')[0].value = SlurryRate;
document.getElementsByClassName('SlurryRate')[1].value = SlurryRate;

注意：

document.getElementsByClassName('SlurryRate') 返回一个元素数组，所以你必须填充所有元素。

当然，您可以编写一个很好的函数来以更简洁的方式处理这个问题，但这应该可以工作。

Answer 2

问题在于重复 ID。 页面上的任何元素都必须有唯一的 ID。如果元素的 ID 重复，则每次都会选择 DOM 顶部的元素。

您还为每个输入字段添加了name 属性。您可以避免添加class。下面的 sn-p 为给定的name 选择 DOM 中的最后一个元素，实际上是最后一行 -

$(input[name="NameOfYourField"]).last().val(ValueOfThisField);

我已经为您在这支笔中的一些输入字段实现了上述功能

https://codepen.io/xpri/pen/PyJMNO

您可以在此看到您的预期行为。