edisontu2 2023-03-15 12:55 采纳率: 100%
浏览 79
已结题

使用HTMLD和Javascript做表格的问题

用html和JavaScript做了一个表格
如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <table id="table1">
  7. <thead>
  8. <tr>
  9. <th style="background-color:#C6E0B4;">選択<input type="checkbox" id="select-all" name="select-all"></th>
  10. <th style="background-color:#C6E0B4;">氏名</th>
  11. <th style="background-color:#C6E0B4;">性別</th>
  12. <th style="background-color:#C6E0B4;">住民税</th>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr>
  17. <td><input type="checkbox" class="select-row" name="select-row"></td>
  18. <td>张三</td>
  19. <td>
  20. <label><input type="radio" id="tanaka" name="gender1" value="male">男性</label>
  21. <label><input type="radio" name="gender1" value="female">女性</label>
  22. </td>
  23. <td><input type="number" id="a" name="consumption-tax" value="12000"></td>
  24. </tr>
  25. <tr>
  26. <td><input type="checkbox" class="select-row" name="select-row"></td>
  27. <td>李四</td>
  28. <td>
  29. <label><input type="radio" name="gender2" id="saito" value="male">男性</label>
  30. <label><input type="radio" name="gender2" value="female">女性</label>
  31. </td>
  32. <td><input type="number" id="b" name="consumption-tax" value="22098"></td>
  33. </tr>
  34. <tr>
  35. <td><input type="checkbox" class="select-row" name="select-row"></td>
  36. <td>王五</td>
  37. <td>
  38. <label><input type="radio" name="gender3" value="male">男性</label>
  39. <label><input type="radio" id="suzuki" name="gender3" value="female">女性</label>
  40. </td>
  41. <td><input type="number" id="c" name="consumption-tax" value="2200"></td>
  42. </tr>
  43. </tbody>
  44. </table>
  45. <hr>
  46. <tbody>
  47. <div>
  48. <p id="left">氏名</p>
  49. <p class="right"><input class="input1" id="namae" type="text" style="width: 100%; height: 100%;"></p>
  50. <input class="input2" type="button" name="" id="button" value="追加" style="width: 60%;"
  51. onclick='addRow()'></input>
  52. </div>
  53. </tbody>
  54. <hr>
  55. <input class="input3" type="button" name="" id="button2" value="削除" style="width: 10%;" onclick='deleteRows()'></input>
  56. <hr>
  57. <table>
  58. <tbody>
  59. <tr>
  60. <td style="background-color:#C6E0B4;">合計</td>
  61. <td><input type="number" id="d" name="consumption-tax" value="36298"></td>
  62. </tr>
  63. <tr>
  64. <td style="background-color:#C6E0B4;">男性合計</td>
  65. <td><input type="number" id="e" name="consumption-tax" value="34098"></td>
  66. </tr>
  67. <tr>
  68. <td style="background-color:#C6E0B4;">女性合計</td>
  69. <td><input type="number" id="f" name="consumption-tax" value="2000"></td>
  70. </tr>
  71. </tbody>
  72. </table>
  73. <script>
  74. const tanakaRadio = document.getElementById('tanaka');
  75. tanakaRadio.checked = true;
  76. tanakaRadio.value = 'male';
  77. const saitoRadio = document.getElementById('saito');
  78. saitoRadio.checked = true;
  79. saitoRadio.value = 'male';
  80. const suzukiRadio = document.getElementById('suzuki');
  81. suzukiRadio.checked = true;
  82. suzukiRadio.value = 'female';
  83. // 全部選択
  84. const selectAllCheckbox = document.getElementById('select-all');
  85. selectAllCheckbox.addEventListener('click', () => {
  86. const selectRowCheckboxes = document.querySelectorAll('.select-row');
  87. selectRowCheckboxes.forEach((checkbox) => {
  88. checkbox.checked = selectAllCheckbox.checked;
  89. });
  90. });
  91. //合計
  92. const inputA = document.getElementById('a');
  93. const inputB = document.getElementById('b');
  94. const inputC = document.getElementById('c');
  95. const inputE = document.getElementById('d');
  96. function updateTotal() {
  97. const tables = document.getElementById("table1").querySelectorAll('input[name="consumption-tax"]')
  98. let total = 0;
  99. tables.forEach((v,i)=>{
  100. total+=Number(v.value)
  101. })
  102. inputE.value = total;
  103. }
  104. inputA.addEventListener('input', updateTotal);
  105. inputB.addEventListener('input', updateTotal);
  106. inputC.addEventListener('input', updateTotal);
  107. //男性の合計
  108. let genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
  109. function updateMaleTotal() {
  110. let maleTotal = 0;
  111. genderRadioButtons.forEach((radioButton) => {
  112. if (radioButton.checked && radioButton.value === "male") {
  113. const row = radioButton.closest('tr');
  114. const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
  115. maleTotal += Number(residentTaxInput.value);
  116. }
  117. });
  118. document.getElementById('e').value = maleTotal;
  119. }
  120. genderRadioButtons.forEach((radioButton) => {
  121. radioButton.addEventListener('click', updateMaleTotal);
  122. });
  123. //女性選択時女性合計
  124. function updateFemaleTotal() {
  125. let femaleTotal = 0;
  126. genderRadioButtons.forEach((radioButton) => {
  127. if (radioButton.checked && radioButton.value === "female") {
  128. const row = radioButton.closest('tr');
  129. const residentTaxInput = row.querySelector('input[name="consumption-tax"]');
  130. femaleTotal += Number(residentTaxInput.value);
  131. }
  132. });
  133. document.getElementById('f').value = femaleTotal;
  134. }
  135. genderRadioButtons.forEach((radioButton) => {
  136. radioButton.addEventListener('click', () => {
  137. updateMaleTotal();
  138. updateFemaleTotal();
  139. });
  140. });
  141. //行追加
  142. function addRow() {
  143. var table = document.getElementById("table1");
  144. var newRow = table.insertRow();
  145. var row1 = table.rows[1];
  146. for (var i = 0; i < row1.cells.length; i++) {
  147. var newCell = newRow.insertCell(i);
  148. newCell.innerHTML = row1.cells[i].innerHTML;
  149. }
  150. input.addEventListener('input', updateTotal);
  151. }
  152. //追加行INPUT代入
  153. let gender = 4
  154. function addRow() {
  155. const table = document.getElementById('table1').getElementsByTagName('tbody')[0];
  156. const newRow = table.insertRow(-1);
  157. const checkBoxCell = newRow.insertCell(0);
  158. checkBoxCell.innerHTML = '<input type="checkbox" class="select-row" name="select-row">';
  159. const nameCell = newRow.insertCell(1);
  160. nameCell.textContent = document.getElementById('namae').value;
  161. const genderCell = newRow.insertCell(2);
  162. 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>`;
  163. gender++
  164. const taxCell = newRow.insertCell(3);
  165. taxCell.innerHTML = '<input type="number" oninput="updateTotal()" name="consumption-tax" value="0">';
  166. genderRadioButtons = document.querySelectorAll('input[name^="gender"]');
  167. genderRadioButtons.forEach((radioButton) => {
  168. radioButton.addEventListener('click', () => {
  169. updateMaleTotal();
  170. updateFemaleTotal();
  171. });
  172. });
  173. }
  174. //CHECKBOX選択行削除
  175. function deleteRows() {
  176. var table = document.getElementById("table1");
  177. var checkboxes = table.getElementsByTagName("input");
  178. var selectedRows = [];
  179. for (var i = 0; i < checkboxes.length; i++) {
  180. if (checkboxes[i].type == "checkbox" && checkboxes[i].checked) {
  181. selectedRows.push(checkboxes[i].parentNode.parentNode);
  182. }
  183. }
  184. for (var i = 0; i < selectedRows.length; i++) {
  185. table.deleteRow(selectedRows[i].rowIndex);
  186. };
  187. deleteButtons.forEach((deleteButton, index) => {
  188. deleteButton.addEventListener('click', () => {
  189. inputFields[index].value = '' ;
  190. });
  191. });
  192. }
  193. taxCell.innerHTML = '<input type="number" oninput="updateTotal()" name="consumption-tax" value="0">';
  194. genderdeleteButtons = document.querySelectorAll('input[name^="gender"]');
  195. genderdeleteButtons.forEach((deleteButton) => {
  196. deleteButton.addEventListener('click', () => {
  197. updateMaleTotal();
  198. updateFemaleTotal();}
  199. )})
  200. </script>
  201. <style>
  202. table {
  203. border-collapse: collapse;
  204. }
  205. th,
  206. td {
  207. border: 1px solid black;
  208. padding: 8px;
  209. }
  210. .table1 {
  211. border-collapse: collapse;
  212. }
  213. #left {
  214. width: 50%;
  215. border: 1px solid black;
  216. background-color: #C6E0B4;
  217. padding: 10px;
  218. }
  219. .right {
  220. width: 50%;
  221. border: 1px solid black;
  222. background-color: white;
  223. padding: 10px;
  224. }
  225. div {
  226. display: flex;
  227. width: 30%;
  228. }
  229. .input1 {
  230. border: none;
  231. }
  232. .input2 {
  233. margin: 10px;
  234. padding: 20px;
  235. background-color: #4472C4;
  236. }
  237. .input3 {
  238. margin: auto 0;
  239. background-color: red;
  240. border: none
  241. }
  242. </style>
  243. </html>

怎么样改才能实现删除勾选的行时,
合计,男生合计,女生合计的数也会自动去掉那一行的数据。

展开全部

  • 写回答

7条回答 默认 最新

  • 简效 2023-03-16 01:43
    关注
    
    <!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>
     
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 3月23日
  • 已采纳回答 3月16日
  • 创建了问题 3月15日

悬赏问题

  • ¥15 没输出运行不了什么问题
  • ¥20 输入import torch显示Intel MKL FATAL ERROR,系统驱动1%,: Cannot load mkl_intel_thread.dll.
  • ¥15 点云密度大则包围盒小
  • ¥15 nginx使用nfs进行服务器的数据共享
  • ¥15 C#i编程中so-ir-192编码的字符集转码UTF8问题
  • ¥15 51嵌入式入门按键小项目
  • ¥30 海外项目,如何降低Google Map接口费用?
  • ¥15 fluentmeshing
  • ¥15 手机/平板的浏览器里如何实现类似荧光笔的效果
  • ¥15 盘古气象大模型调用(python)
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部