如何逐行獲取html表值並對值執行一些計算？
[英]How to get the html table value row by row and perform some calculations on values?
問題描述
如何逐行獲取第一個表值，並在表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>
2 個解決方案
解決方案1
0 2018-10-15 07:10:16
我想問題是你有重復的ID 。 該ID應該是唯一的，並且只能在頁面上使用一次。 你應該用這樣的類 es替換它們（當你添加它們時）：
$("#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')返回一個元素數組，因此您必須填充所有元素。
當然，您可以編寫一個很好的函數來以更清晰的方式處理它，但是這應該可行。
解決方案2
0 2018-10-15 07:21:05
問題是重復ID。 頁面上的任何元素都必須具有唯一ID。 如果元素有重復的ID，則每次都會選擇DOM頂部的元素。
您還為每個輸入字段添加了name屬性。 您可以避免添加class 。 以下代碼段選擇DOM中給定name的最后一個元素 ，實際上是最后一行 -
$(input[name="NameOfYourField"]).last().val(ValueOfThisField);
我已經為這支筆中的一些輸入字段實現了上述功能
https://codepen.io/xpri/pen/PyJMNO
您可以在此查看預期的行為。
如何從具有多個值的行內的HTML表格中獲取值
[英]How to get a value from Html table inside a row which has a multiple values
如何使用javascript連續獲取HTML表格單元格上的Dropdownlist值
[英]How to get Dropdownlist value on HTML Table Cell in a Row using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.