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

Question

How to fetch first table value row by row and show these values in a dynamically created row with the same name in table 2.

I got first table value row by row by I cannot show these value in row by row in the table. In table 2 it shows the value with last row value it cannot insert value in next row but it can override the first-row value.

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

I guess problem is that you have duplicate ID s. The ID should be unique and used only once on a page. You should replace them with class es like this (while you adding them):

$("#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>");

Then you should fill the values like this

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

NOTE:

document.getElementsByClassName('SlurryRate') returns an array of elements, so you have to fill all the elements.

Of course, you can write a nice function to handle this in a cleaner way, however this should work.

Answer 2

The issue is with duplicate ID. Any element on the page must have a unique ID. If there are duplicate ID for elements, the element at the top of the DOM gets selected every time.

You have also put the name attribute for each input field. You can avoid adding class . The following snippet selects the last element in DOM for the given name and effectively, the last row -

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

I have implemented the above for some of your input fields in this pen

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

You can see your expected behavior in this.