我有一個動態表，在一個 td 中傳遞 php 價格值，表末尾是這些價格的總和。每行還有一個復選框默認選中。我需要清空未選中復選框的行的內容，以便從總和計算中刪除該價格值。問題是，這會消除該值嗎？我知道將 td 字段設置為隱藏不會。值單元格：<td style="width:10%" class="rowDataSd" id="value"> <?php echo str_replace(array(".", ",",), array("", "."), $row['rad_iznos']); ?></td>復選框單元格：<td style="width:3%"><input class="w3-check" type="checkbox" checked="checked" id="remove" name="uvrsti" value="<?php echo $row['rad_id']?>"></td>我嘗試過這個，但沒有發生任何錯誤： $(document).ready(function(){ if($("#remove").is(':checked')) { $("#value").show(); } else { $("#value").empty(); } });我可以將唯一值傳遞到每個復選框并將值元素傳遞到 id 中，如下所示：id="<?php echo $row['rad_id']?>"。所以他們互相聯系，但不知道如何在 JS 中說清空這些元素。我也在考慮類似的事情，如果在某些行復選框未選中空最接近的 td 且 id="value"。我的猜測是這將是最好的解決方案，但我不知道如何寫。或者，即使未選中復選框，也將 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>'); }); });如圖所示，如果未選中復選框，則需要從計算中刪除行。請記住，我不想刪除行，只需將其刪除我們的計算即可。任何有關如何解決此問題的幫助都將受到贊賞。
2 回答
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
這是一個基本示例。
$(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>
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
這一切都歸結為為復選框設置事件處理程序。事件處理程序應執行以下操作：
跟蹤
checkbox change所有復選框的事件和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();//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 關注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消