用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>
-
怎么样改才能实现删除勾选的行时,
合计,男生合计,女生合计的数也会自动去掉那一行的数据。