用html和JavaScript做了一个表格
如下
html>
<html>
<head>
<meta charset="UTF-8">
head>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all">th>
<th style="background-color:#C6E0B4;">氏名th>
<th style="background-color:#C6E0B4;">性別th>
<th style="background-color:#C6E0B4;">住民税th>
tr>
thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>张三td>
<td>
<label><input type="radio" id="tanaka" name="gender1" value="male">男性label>
<label><input type="radio" name="gender1" value="female">女性label>
td>
<td><input type="number" id="a" name="consumption-tax" value="12000">td>
tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>李四td>
<td>
<label><input type="radio" name="gender2" id="saito" value="male">男性label>
<label><input type="radio" name="gender2" value="female">女性label>
td>
<td><input type="number" id="b" name="consumption-tax" value="22098">td>
tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row">td>
<td>王五td>
<td>
<label><input type="radio" name="gender3" value="male">男性label>
<label><input type="radio" id="suzuki" name="gender3" value="female">女性label>
td>
<td><input type="number" id="c" name="consumption-tax" value="2200">td>
tr>
tbody>
table>
<hr>
<tbody>
<div>
<p id="left">氏名p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;">p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
onclick='addRow()'>input>
div>
tbody>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'>input>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計td>
<td><input type="number" id="d" name="consumption-tax" value="36298">td>
tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計td>
<td><input type="number" id="e" name="consumption-tax" value="34098">td>
tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計td>
<td><input type="number" id="f" name="consumption-tax" value="2000">td>
tr>
tbody>
table>
<script>
const tanakaRadio = document.getElementById('tanaka');
tanakaRadio.checked = true;
tanakaRadio.value = 'male';
const saitoRadio = document.getElementById('saito');
saitoRadio.checked = true;
saitoRadio.value = 'male';
const suzukiRadio = document.getElementById('suzuki');
suzukiRadio.checked = true;
suzukiRadio.value = 'female';
// 全部選択
const selectAllCheckbox = document.getElementById('select-all');
selectAllCheckbox.addEventListener('click', () => {
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
});
});
//合計
const inputA = document.getElementById('a');
const inputB = document.getElementById('b');
const inputC = document.getElementById('c');
const inputE = document.getElementById('d');
function updateTotal() {
const tables = document.getElementById("table1").querySelectorAll('input[name="consumption-tax"]')
let total = 0;
tables.forEach((v,i)=>{
total+=Number(v.value)
})
inputE.value = total;
}
inputA.addEventListener('input', updateTotal);
inputB.addEventListener('input', updateTotal);
inputC.addEventListener('input', updateTotal);
//男性の合計
let genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
function updateMaleTotal() {
let maleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "male") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
maleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('e').value = maleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', updateMaleTotal);
});
//女性選択時女性合計
function updateFemaleTotal() {
let femaleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "female") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
femaleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('f').value = femaleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
//行追加
function addRow() {
var table = document.getElementById("table1");
var newRow = table.insertRow();
var row1 = table.rows[1];
for (var i = 0; i < row1.cells.length; i++) {
var newCell = newRow.insertCell(i);
newCell.innerHTML = row1.cells[i].innerHTML;
}
input.addEventListener('input', updateTotal);
}
//追加行INPUT代入
let gender = 4
function addRow() {
const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
const newRow = table.insertRow(-1);
const checkBoxCell = newRow.insertCell(0);
checkBoxCell.innerHTML = '';
const nameCell = newRow.insertCell(1);
nameCell.textContent = document.getElementById('namae').value;
const genderCell = newRow.insertCell(2);
genderCell.innerHTML = `" value="male">男性" value="female">女性`;
gender++
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '';
genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
}
//CHECKBOX選択行削除
function deleteRows() {
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
};
deleteButtons.forEach((deleteButton, index) => {
deleteButton.addEventListener('click', () => {
inputFields[index].value = '' ;
});
});
}
taxCell.innerHTML = '';
genderdeleteButtons = document.querySelectorAll('input[name^="gender"]');
genderdeleteButtons.forEach((deleteButton) => {
deleteButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();}
)})
script>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
.table1 {
border-collapse: collapse;
}
#left {
width: 50%;
border: 1px solid black;
background-color: #C6E0B4;
padding: 10px;
}
.right {
width: 50%;
border: 1px solid black;
background-color: white;
padding: 10px;
}
div {
display: flex;
width: 30%;
}
.input1 {
border: none;
}
.input2 {
margin: 10px;
padding: 20px;
background-color: #4472C4;
}
.input3 {
margin: auto 0;
background-color: red;
border: none
}
style>
html>
怎么样改才能实现删除勾选的行时，
合计，男生合计，女生合计的数也会自动去掉那一行的数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all"></th>
<th style="background-color:#C6E0B4;">氏名</th>
<th style="background-color:#C6E0B4;">性別</th>
<th style="background-color:#C6E0B4;">住民税</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>张三</td>
<td>
<label><input type="radio" id="tanaka" name="gender1" value="male">男性</label>
<label><input type="radio" name="gender1" value="female">女性</label>
</td>
<td><input type="number" id="a" name="consumption-tax" value="12000"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>李四</td>
<td>
<label><input type="radio" name="gender2" id="saito" value="male">男性</label>
<label><input type="radio" name="gender2" value="female">女性</label>
</td>
<td><input type="number" id="b" name="consumption-tax" value="22098"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>王五</td>
<td>
<label><input type="radio" name="gender3" value="male">男性</label>
<label><input type="radio" id="suzuki" name="gender3" value="female">女性</label>
</td>
<td><input type="number" id="c" name="consumption-tax" value="2200"></td>
</tr>
</tbody>
</table>
<hr>
<tbody>
<div>
<p id="left">氏名</p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
onclick='addRow()'></input>
</div>
</tbody>
<hr>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'></input>
<hr>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計</td>
<td><input type="number" id="d" name="consumption-tax" value="36298"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計</td>
<td><input type="number" id="e" name="consumption-tax" value="34098"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計</td>
<td><input type="number" id="f" name="consumption-tax" value="2000"></td>
</tr>
</tbody>
</table>
<script>
const tanakaRadio = document.getElementById('tanaka');
tanakaRadio.checked = true;
tanakaRadio.value = 'male';
const saitoRadio = document.getElementById('saito');
saitoRadio.checked = true;
saitoRadio.value = 'male';
const suzukiRadio = document.getElementById('suzuki');
suzukiRadio.checked = true;
suzukiRadio.value = 'female';
// 全部選択
const selectAllCheckbox = document.getElementById('select-all');
selectAllCheckbox.addEventListener('click', () => {
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = selectAllCheckbox.checked;
});
});
//合計
const inputA = document.getElementById('a');
const inputB = document.getElementById('b');
const inputC = document.getElementById('c');
const inputE = document.getElementById('d');
function updateTotal() {
const tables = document.getElementById("table1").querySelectorAll('input[name="consumption-tax"]')
let total = 0;
tables.forEach((v,i)=>{
total+=Number(v.value)
})
inputE.value = total;
}
inputA.addEventListener('input', updateTotal);
inputB.addEventListener('input', updateTotal);
inputC.addEventListener('input', updateTotal);
//男性の合計
let genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
function updateMaleTotal() {
let maleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "male") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
maleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('e').value = maleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', updateMaleTotal);
});
//女性選択時女性合計
function updateFemaleTotal() {
let femaleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "female") {
const row = radioButton.closest('tr');
const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
femaleTotal += Number(residentTaxInput.value);
}
});
document.getElementById('f').value = femaleTotal;
}
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
//行追加
function addRow() {
var table = document.getElementById("table1");
var newRow = table.insertRow();
var row1 = table.rows[1];
for (var i = 0; i < row1.cells.length; i++) {
var newCell = newRow.insertCell(i);
newCell.innerHTML = row1.cells[i].innerHTML;
}
input.addEventListener('input', updateTotal);
}
//追加行INPUT代入
let gender = 4
function addRow() {
const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
const newRow = table.insertRow(-1);
const checkBoxCell = newRow.insertCell(0);
checkBoxCell.innerHTML = '<input type="checkbox" class="select-row" name="select-row">';
const nameCell = newRow.insertCell(1);
nameCell.textContent = document.getElementById('namae').value;
const genderCell = newRow.insertCell(2);
genderCell.innerHTML = `<label><input type="radio" name="gender<span class="hljs-subst">${gender}" value="male">男性</label><label><input type="radio" name="gender<span class="hljs-subst">${gender}" value="female">女性</label>`;
gender++
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '<input type="number" oninput="updateTotal()" name="consumption-tax" value="0">';
genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
genderRadioButtons.forEach((radioButton) => {
radioButton.addEventListener('click', () => {
updateMaleTotal();
updateFemaleTotal();
});
});
}
//CHECKBOX選択行削除
function deleteRows() {
console.log(123)
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
};
genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
updateMaleTotal();
updateFemaleTotal();
// deleteButtons.forEach((deleteButton, index) => {
// deleteButton.addEventListener('click', () => {
// inputFields[index].value = '' ;
// });
// });
}
// taxCell.innerHTML = '<input type="number" oninput="updateTotal()" name="consumption-tax" value="0">';
// genderdeleteButtons = document.querySelectorAll('input[name^="gender"]');
// genderdeleteButtons.forEach((deleteButton) => {
// deleteButton.addEventListener('click', () => {
// updateMaleTotal();
// updateFemaleTotal();}
// )})
</script>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
.table1 {
border-collapse: collapse;
}
#left {
width: 50%;
border: 1px solid black;
background-color: #C6E0B4;
padding: 10px;
}
.right {
width: 50%;
border: 1px solid black;
background-color: white;
padding: 10px;
}
div {
display: flex;
width: 30%;
}
.input1 {
border: none;
}
.input2 {
margin: 10px;
padding: 20px;
background-color: #4472C4;
}
.input3 {
margin: auto 0;
background-color: red;
border: none
}
</style>
</html>
参考GPT和自己的思路，要实现删除选中行时，合计、男生合计、女生合计的数也会自动删除，需要对表格的HTML和JavaScript代码进行一些修改。以下是修改后的代码：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table id="table1">
<thead>
<tr>
<th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all"></th>
<th style="background-color:#C6E0B4;">氏名</th>
<th style="background-color:#C6E0B4;">性別</th>
<th style="background-color:#C6E0B4;">住民税</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>张三</td>
<td>
<label><input type="radio" id="tanaka" name="gender1" value="male">男性</label>
<label><input type="radio" name="gender1" value="female">女性</label>
</td>
<td><input type="number" id="a" name="consumption-tax" value="12000"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>李四</td>
<td>
<label><input type="radio" name="gender2" id="saito" value="male">男性</label>
<label><input type="radio" name="gender2" value="female">女性</label>
</td>
<td><input type="number" id="b" name="consumption-tax" value="22098"></td>
</tr>
<tr>
<td><input type="checkbox" class="select-row" name="select-row"></td>
<td>王五</td>
<td>
<label><input type="radio" name="gender3" value="male">男性</label>
<label><input type="radio" id="suzuki" name="gender3" value="female">女性</label>
</td>
<td><input type="number" id="c" name="consumption-tax" value="2200"></td>
</tr>
</tbody>
</table>
<div>
<p id="left">氏名</p>
<p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
<input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;" onclick='addRow()'></input>
</div>
<input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'></input>
<table>
<tbody>
<tr>
<td style="background-color:#C6E0B4;">合計</td>
<td><input type="number" id="d" name="consumption-tax" value="36298"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計</td>
<td><input type="number" id="e" name="consumption-tax" value="34098"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計</td>
<td><input type="number" id="f" name="consumption-tax" value="2000"></td>
</tr>
</tbody>
</table>
JavaScript代码：
const selectAllCheckbox = document.getElementById('select-all');
const selectRowCheckboxes = document.querySelectorAll('.select-row');
const inputD = document.getElementById('d');
const inputE = document.getElementById('e');
const inputF = document.getElementById('f');
// 删除选中行时，更新合计、男生合计、女生合计的值
function updateTotal() {
let total = 0;
let maleTotal = 0;
let femaleTotal = 0;
const rows = document.querySelectorAll('#table1 tbody tr');
rows.forEach((row) => {
if (row.querySelector('.select-row').checked) {
const tax = Number(row.querySelector('[name="consumption-tax"]').value);
total -= tax;
if (row.querySelector('[value="male"]').checked) {
maleTotal -= tax;
} else {
femaleTotal -= tax;
}
row.remove();
} else {
const tax = Number(row.querySelector('[name="consumption-tax"]').value);
total += tax;
if (row.querySelector('[value="male"]').checked) {
maleTotal += tax;
} else {
femaleTotal += tax;
}
}
});
inputD.value = total;
inputE.value = maleTotal;
inputF.value = femaleTotal;
}
// 全选和取消全选
selectAllCheckbox.addEventListener('click', () => {
const checked = selectAllCheckbox.checked;
selectRowCheckboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
});
// 删除选中行
function deleteRows() {
updateTotal();
}
主要的修改是在updateTotal()函数中，先计算出删除选中行后的合计、男生合计和女生合计，再把选中的行从表格中删除，并更新合计、男生合计和女生合计的值。其中，通过querySelector方法和CSS选择器获取行中的输入框元素，用checked属性判断单选框是否选中，用value属性获取单选框的值。最后，更新值时用value属性设置输入框的值。
在deleteRows()函数中，调用updateTotal()函数实现删除选中行并更新合计、男生合计和女生合计的值。
回答不易，还请采纳！！！
参考GPT和自己的思路：为了实现删除勾选的行时合计，男性合计和女性合计的数也自动去掉那一行的数据，您需要做以下更改：
1 在删除行的函数deleteRows()中，使用querySelectorAll选中被勾选的行，然后遍历这些行，对每行都执行以下步骤：
获取该行的性别（男/女）并保存在变量gender中。
获取该行的消费税值并保存在变量tax中。
通过document.querySelector选中合计、男性合计、女性合计的元素，分别保存在变量totalInput、maleInput和femaleInput中。
根据性别更新男性/女性合计的值：如果gender为male，则将男性合计的值减去tax；如果gender为female，则将女性合计的值减去tax。
更新合计的值：将合计的值减去tax。
以下是deleteRows()函数的示例代码：
function deleteRows() {
const selectedRows = document.querySelectorAll('tbody tr input[type="checkbox"]:checked');
selectedRows.forEach((row) => {
const gender = row.parentNode.parentNode.querySelector('input[type="radio"]:checked').value;
const tax = parseInt(row.parentNode.parentNode.querySelector('input[type="number"]').value);
const totalInput = document.querySelector('#table2 tr:nth-child(1) input');
const maleInput = document.querySelector('#table2 tr:nth-child(2) input');
const femaleInput = document.querySelector('#table2 tr:nth-child(3) input');
if (gender === 'male') {
maleInput.value = parseInt(maleInput.value) - tax;
} else {
femaleInput.value = parseInt(femaleInput.value) - tax;
}
totalInput.value = parseInt(totalInput.value) - tax;
row.parentNode.parentNode.remove();
});
}
2 在添加新行的函数addRow()中，对新行的性别元素添加change事件监听器，在该事件监听器中调用updateGenderCount()函数更新男性/女性合计的值。updateGenderCount()函数的实现和上一步骤中的代码类似，只不过这里是根据性别来增加合计的值。
以下是addRow()和updateGenderCount()函数的示例代码：
function addRow() {
const tbody = document.querySelector('#table1 tbody');
const nameInput = document.querySelector('#namae');
const genderInputs = document.querySelectorAll('input[type="radio"]:checked');
const taxInput = document.createElement('input');
taxInput.type = 'number';
taxInput.name = 'consumption-tax';
taxInput.value = '0';
const tr = document.createElement('tr');
const td1 = document.createElement('td');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'select-row';
td1.appendChild(checkbox);
tr.appendChild(td1);
const td2 = document.createElement('td');
td2.textContent = nameInput.value;
tr.appendChild(td2);
const td3 = document.createElement('td');
const genderInput = genderInputs[0];
genderInput.addEventListener('change', updateGenderCount);
const td4 = document.createElement('td');
td4.textContent = genderInput.value;
tr.appendChild(td4);
const td5 = document.createElement('td');
td5.appendChild(taxInput);
tr.appendChild(td5);
tbody.appendChild(tr);
}
function updateGenderCount() {
const maleCountElement = document.querySelector('#male-count');
const femaleCountElement = document.querySelector('#female-count');
const genderInputs = document.querySelectorAll('input[type="radio"]');
let maleCount = 0;
let femaleCount = 0;
genderInputs.forEach(input => {
if (input.checked) {
if (input.value === 'male') {
maleCount++;
} else if (input.value === 'female') {
femaleCount++;
}
}
});
maleCountElement.textContent = maleCount.toString();
femaleCountElement.textContent = femaleCount.toString();
}
3 实现selectAllRows()函数，该函数可以通过在全选复选框上添加click事件监听器来实现。当全选复选框被选中时，该函数将选择所有行的复选框；当全选复选框被取消选中时，该函数将取消选择所有行的复选框。
以下是实现selectAllRows()函数的示例代码：
function selectAllRows() {
const selectAllCheckbox = document.querySelector('#select-all');
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectRowCheckboxes.forEach(checkbox => {
checkbox.checked = selectAllCheckbox.checked;
});
}
在该函数中，我们首先获取全选复选框和所有行的复选框，然后遍历所有行的复选框，并根据全选复选框的状态来设置它们的选中状态。如果全选复选框被选中，则设置所有行的复选框为选中状态；否则，取消选中所有行的复选框。
直接用 extjs，里面封装了漂亮的表格，可以直接拿来用。
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
要实现删除勾选的行时，合计、男生合计、女生合计的数也会自动去掉被删除行的数据，可以在删除勾选的行的函数中加上相应的代码来实现。以下是修改后的代码：
//CHECKBOX選択行削除
function deleteRows() {
var table = document.getElementById("table1");
var checkboxes = table.getElementsByTagName("input");
var selectedRows = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
selectedRows.push(checkboxes[i].parentNode.parentNode);
const residentTaxInput = checkboxes[i].parentNode.parentNode.querySelector('input[name="consumption-tax"]');
if (residentTaxInput.value !== '') {
inputE.value -= Number(residentTaxInput.value);
if (checkboxes[i].value === 'male') {
inputE.value -= Number(residentTaxInput.value);
inputF.value -= Number(residentTaxInput.value);
} else {
inputF.value -= Number(residentTaxInput.value);
}
}
}
}
for (var i = 0; i < selectedRows.length; i++) {
table.deleteRow(selectedRows[i].rowIndex);
}
}
修改后的主要变化在于，在删除选中的行之前，先遍历这些行，如果这些行的“住民税”输入框的值不是空字符串，就从相应的合计、男生合计、女生合计中减去该值。
同时，在页面中也需要加上相应的输入框来分别显示合计、男生合计和女生合计：
<tr>
<td style="background-color:#C6E0B4;">合計</td>
<td><input type="number" id="d" name="consumption-tax" value="36298"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">男性合計</td>
<td><input type="number" id="e" name="consumption-tax" value="34098"></td>
</tr>
<tr>
<td style="background-color:#C6E0B4;">女性合計</td>
<td><input type="number" id="f" name="consumption-tax" value="2000"></td>
</tr>
在修改某行“住民税”输入框的值时，也要调用更新合计、男生合计、女生合计的函数：
taxCell.innerHTML = '<input type="number" oninput="updateTotal();updateMaleTotal();updateFemaleTotal();" name="consumption-tax" value="0">';
修改后的完整代码如下：
如果我的回答解决了您的问题，请采纳！