<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格全选/取消全选</title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </sty
实现表格全选和取消全选
最新推荐文章于 2022-04-10 15:13:14 发布
这篇博客演示了如何使用HTML5和JavaScript实现表格的全选和取消全选功能。通过在表格头部设置一个复选框,当点击该复选框时,所有行的复选框状态将随之改变。同时,当单击表格中的任何行时,会根据当前行的选中状态更新全选复选框的选中状态。示例代码包括HTML结构、CSS样式和JavaScript事件处理。
摘要由CSDN通过智能技术生成