Question

我有一个使用Bootstrap 4 div列系统制作的表，我想在每一行中对第三列中的2列求和，但是我只收到第一行的值。请帮我汇总表中的所有行。

我尝试使用以下脚本来执行此操作，但我仅收到第一行的值。

$(document).ready(function() {
  $('.row').each(function() {
    var $this = $(this);
    var ata = parseFloat($("#ata").text());
    var eta = parseFloat($("#eta").text());
    var at = ata - eta;
    $("#balance").html(at.toFixed(0) + " min")
  })
})

HTML：

<div class="card">
    <div class="row">
        <div class="col-6">Name</div>
        <div class="col-2">Alocated Time</div>
        <div class="col-2">Efective Time</div>
        <div class="col-2">Balance</div>
    </div>
    <div class="row row-striped">
        <div class="col-6">qwerty</a>
        </div>
        <div class="col-2">
            <div id="eta">500</div>
        </div>
        <div class="col-2">
            <div id="eta">100</div>
        </div>
        <div class="col-2">
            <div id="balance">"here i want to add 100+500 with jquery script"</div>
        </div>
    </div>
    <div>......</div>
</div>

Answer 1

萨拉姆当您使用“＃”选择器时，查询包含一个元素，即页面中的第一个元素，您必须使用class而不是id，然后才能在row中找到单元格并使用其值

例如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table >
<tr class="row">
	<td class="val1">
    	5
	</td>
	<td class="val2">
    	1
	</td>
	<td class="result">
	</td>
</tr>
<tr class="row">
	<td class="val1">
    	10
	</td>
	<td class="val2">
    	2
	</td>
	<td class="result">
	</td>
</tr>
<button>test</button>

</table>
<script>
 $("button").click(function(){
 	$('.row').each(function(){
    	var val1 =$(this).find(".val1").text();
    	var val2 =$(this).find(".val2").text();
        var ata = parseFloat(val1);
    	var eta = parseFloat(val2);
    	var at = ata - eta;
        var result = at.toFixed(0) + " min";
    	var val2 =$(this).find(".result").text(result);
    });
 });
</script>

汇总表（div表）每一行中两列的值

1 个答案: