实现表格点击自动打勾：详细指南与实战案例解析
要设置表格中的单元格在点击时自动打勾，通常需要使用前端技术，如HTML、CSS和JavaScript。以下是一个详细的步骤说明，以及一个简单的案例。
步骤说明：
-
创建HTML表格： 首先，你需要创建一个基本的HTML表格。
-
添加CSS样式： 为了让表格看起来更美观，你可以添加一些CSS样式。
-
编写JavaScript代码： 使用JavaScript为表格的单元格添加点击事件监听器，当单元格被点击时，检查其状态，并相应地更新其内容。
示例代码：
1. HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="checkboxTable">
<tr>
<th>Item</th>
<th>Checked</th>
</tr>
<tr>
<td>Item 1</td>
<td class="checkbox-cell" data-checked="false">☐</td>
</tr>
<tr>
<td>Item 2</td>
<td class="checkbox-cell" data-checked="false">☐</td>
</tr>
<tr>
<td>Item 3</td>
<td class="checkbox-cell" data-checked="false">☐</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
2. CSS样式（styles.css）：
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.checkbox-cell {
cursor: pointer;
}
3. JavaScript代码（script.js）：
document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('checkboxTable');
const cells = table.querySelectorAll('.checkbox-cell');
cells.forEach(function(cell) {
cell.addEventListener('click', function() {
const isChecked = cell.getAttribute('data-checked') === 'true';
cell.setAttribute('data-checked', !isChecked);
cell.textContent = isChecked ? '☐' : '☑';
});
});
});
案例解释：
-
HTML：创建了一个简单的表格，其中第三列是可点击的复选框单元格。每个单元格都包含一个
data-checked属性，用于跟踪其是否被选中。 -
CSS：为表格和单元格添加了一些基本样式，使得表格更加美观。
.checkbox-cell类使单元格看起来像复选框，并设置了鼠标手势为指针，表示可点击。 -
JavaScript：在文档加载完成后，为每个
.checkbox-cell单元格添加了点击事件监听器。当单元格被点击时，JavaScript会检查data-checked属性的值，并根据当前状态更新单元格的内容（从☐变为☑或相反）。
通过这种方式，你可以创建一个表格，其中的单元格在点击时会自动打勾或取消勾选。
