如何逐行获取第一个表值并将这些值显示在表 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>
最佳答案
我想问题是您有重复的 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')
返回一个元素数组,因此您必须填充所有元素。
当然,您可以编写一个不错的函数以更简洁的方式处理此问题,但这应该可行。
关于javascript - 如何逐行获取html表格值并对值进行一些计算?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52811064/