效果展示
代码如下
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>列表展示设置</title> 6. <script src="./jquery-3.6.3.js"></script> 7. <style> 8. tr { 9. height: 50px; 10. border: 1px solid black; 11. } 12. .box{ 13. width: 100%;align-items: center;justify-content: space-around; 14. } 15. </style> 16. </head> 17. <body> 18. <div class="box"> 19. <div>第一列<input type="checkbox" id="one" onchange='dele(0,this)' checked></div> 20. <div>第二列<input type="checkbox" id="two" onchange='dele(1,this)' checked></div> 21. <div>第三列<input type="checkbox" id="three" onchange='dele(2,this)' checked></div> 22. <div>第四列<input type="checkbox" id="four" onchange='dele(3,this)' checked></div> 23. <div>第五列<input type="checkbox" id="five" onchange='dele(4,this)' checked></div> 24. <div>第六列<input type="checkbox" id="six" onchange='dele(5,this)' checked></div> 25. </div> 26. <div class="table"> 27. <table style="width: 100%;text-align: center;border-collapse: collapse;margin-top: 2%;" id="ta"> 28. <thead> 29. <tr> 30. <td>第一列</td> 31. <td>第二列</td> 32. <td>第三列</td> 33. <td>第四列</td> 34. <td>第五列</td> 35. <td>第六列</td> 36. </tr> 37. </thead> 38. <tbody> 39. <tr> 40. <td>这是第一行</td> 41. <td>这是第一行</td> 42. <td>这是第一行</td> 43. <td>这是第一行</td> 44. <td>这是第一行</td> 45. <td>这是第一行</td> 46. </tr> 47. <tr> 48. <td>这是第二行</td> 49. <td>这是第二行</td> 50. <td>这是第二行</td> 51. <td>这是第二行</td> 52. <td>这是第二行</td> 53. <td>这是第二行</td> 54. </tr> 55. <tr> 56. <td>这是第三行</td> 57. <td>这是第三行</td> 58. <td>这是第三行</td> 59. <td>这是第三行</td> 60. <td>这是第三行</td> 61. <td>这是第三行</td> 62. </tr> 63. <tr> 64. <td>这是第四行</td> 65. <td>这是第四行</td> 66. <td>这是第四行</td> 67. <td>这是第四行</td> 68. <td>这是第四行</td> 69. <td>这是第四行</td> 70. </tr> 71. </tbody> 72. </table> 73. </div> 74. <script> 75. function dele(b, e) { 76. if (e.checked == false) { 77. let ta = document.getElementById('ta') 78. for (let i = 0; i < ta.rows.length; i++) { 79. ta.rows[i].cells[b].style.display='none' 80. } 81. }else{ 82. let ta = document.getElementById('ta') 83. for (let i = 0; i < ta.rows.length; i++) { 84. ta.rows[i].cells[b].style.display='' 85. } 86. } 87. } 88. </script> 89. </body> 90. </html>
