用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" name="gender1" value="男性">男性</label>
<label><input type="radio" name="gender1" value="女性">女性</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" value="男性">男性</label>
<label><input type="radio" name="gender2" value="女性">女性</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="男性">男性</label>
<label><input type="radio" name="gender3" value="女性">女性</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 selectAllCheckbox = document.getElementById('select-all');
const selectRowCheckboxes = document.querySelectorAll('.select-row');
selectAllCheckbox.addEventListener('click', () => {
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 total = Number(inputA.value) + Number(inputB.value) + Number(inputC.value);
inputE.value = total;
}
inputA.addEventListener('input', updateTotal);
inputB.addEventListener('input', updateTotal);
inputC.addEventListener('input', updateTotal);
//男性の合計
const genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
function updateMaleTotal() {
let maleTotal = 0;
genderRadioButtons.forEach((radioButton) => {
if (radioButton.checked && radioButton.value === "男性") {
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 === "女性") {
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代入
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" value="男性">男性</label><label><input type="radio" name="gender" value="女性">女性</label>';
const taxCell = newRow.insertCell(3);
taxCell.innerHTML = '<input type="number" name="consumption-tax" value="0">';
}
//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);
}
}
</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>
提问！！
怎么样能够实现点击了追加按键，追加的一行也能实现被全选，追加一行的数字也能计入合计。
并且按下男性或者女性的选择按键，下面的男性女性的合计也会改变。
