用html和JavaScript做了一个表格
如下
<!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() {
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 = '<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>
怎么样改才能实现删除勾选的行时，
合计，男生合计，女生合计的数也会自动去掉那一行的数据。
