我有一個動態(tài)表，在一個 td 中傳遞了價格的 php vales，表的末尾是這些價格的總和。在默認選中的每一行中還有一個復(fù)選框。我需要清空未選中復(fù)選框的行的內(nèi)容，以便從總和計算中刪除該價格值。問題，這甚至?xí)h除該值嗎？我知道將 td 字段設(shè)置為隱藏不會。值單元格：<td style="width:10%" class="rowDataSd" id="value"> <?php echo str_replace(array(".", ",",), array("", "."), $row['rad_iznos']); ?></td>復(fù)選框單元格：<td style="width:3%"><input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>"></td>我試過了，但沒有任何錯誤發(fā)生： $(document).ready(function(){ if($("#remove").is(':checked')) { $("#value").show(); } else { $("#value").empty(); } });我可以將唯一值傳遞給每個復(fù)選框，并將值元素傳遞給 id，例如：id="<?php echo $row['rad_id']?>". 所以他們相互捆綁，但不知道在 JS 中如何說清空這些元素。我也在考慮類似的事情，如果在某行復(fù)選框未選中，則為空的最接近 td 且 id="value"。我的猜測是這將是最好的解決方案，但我不知道如何編寫它。或者即使未選中復(fù)選框，也將 css 類 .rowDataSd 刪除到最接近的 td，其中 id="vale" 基于進行計算的人。求和腳本： var totals=[0,0,0]; $(document).ready(function(){ var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')"); $dataRows.each(function() { $(this).find('.rowDataSd').each(function(i){ totals[i]+=parseFloat( $(this).html()); }); }); $("#sum_table td.totalCol").each(function(i){ $(this).html('<span style="font-weight: bold;text-shadow: 0.5px 0 #888888;">'+totals[i].toFixed(2)+' kn</span>'); }); });如圖所示，如果未選中復(fù)選框，則需要從計算中刪除行。請記住，我不想刪除行，只需將其刪除我們的計算。任何有關(guān)如何解決此問題的幫助表示贊賞。
2 回答
qq_笑_17
TA貢獻1818條經(jīng)驗 獲得超7個贊
這是一個基本的例子。
$(function() {
function getPrice(row) {
var txt = $(".price", row).text().slice(1);
var p = parseFloat(txt);
return p;
}
function calcSum(t) {
var result = 0.00;
$("tbody tr", t).each(function(i, r) {
if ($("input", r).is(":checked")) {
result += getPrice(r);
}
});
return result;
}
function updateSum(tbl) {
var t = calcSum(tbl);
$("tfoot .total.price", tbl).html("$" + t.toFixed(2));
}
updateSum($("#price-list"));
$("#price-list input").change(function() {
updateSum($("#price-list"));
});
});
#price-list {
width: 240px;
}
#price-list thead th {
width: 33%;
border-bottom: 1px solid #ccc;
}
#price-list tfoot td {
border-top: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="price-list">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="item name">Item 1</td>
<td class="item price">$3.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 2</td>
<td class="item price">$4.00</td>
<td><input type="checkbox" checked /></td>
</tr>
<tr>
<td class="item name">Item 3</td>
<td class="item price">$5.00</td>
<td><input type="checkbox" checked /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td class="total price">$0.00</td>
<td> </td>
</tr>
</tfoot>
</table>
MYYA
TA貢獻1868條經(jīng)驗 獲得超4個贊
這一切都歸結(jié)為為復(fù)選框設(shè)置事件處理程序。事件處理程序應(yīng)執(zhí)行以下操作：
跟蹤
checkbox change所有復(fù)選框的事件和DOM ready事件計算選中復(fù)選框的所有行的總數(shù)
將總計設(shè)置為總元素
它還調(diào)用對未選中的行執(zhí)行任何所需的更改..在下面的示例代碼中未完成
編碼
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();//trigger the change event on DOM ready
});
片段
$(function() {
$('.select').on('change', function() {
let total = $('.select:checked').map(function() {
return +$(this).parent().prev().text();
})
.get()
.reduce(function(sum, price) {
return sum + price;
});
$('#total').text( total );
})
.change();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Item</th>
<th>Price</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>1000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 2</td>
<td>1200</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 3</td>
<td>800</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
<tr>
<td>Item 4</td>
<td>102000</td>
<td><input type="checkbox" class="select" checked></td>
</tr>
</tbody>
</table>
<span>TOTAL</span><span id="total"></span>
- 2 回答
- 0 關(guān)注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消