根据响应的行和列显示和禁用复选框,可以通过以下步骤实现:
<table>
<tr>
<th></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>行1</td>
<td><input type="checkbox" id="checkbox-1-1"></td>
<td><input type="checkbox" id="checkbox-1-2"></td>
<td><input type="checkbox" id="checkbox-1-3"></td>
</tr>
<tr>
<td>行2</td>
<td><input type="checkbox" id="checkbox-2-1"></td>
<td><input type="checkbox" id="checkbox-2-2"></td>
<td><input type="checkbox" id="checkbox-2-3"></td>
</tr>
<tr>
<td>行3</td>
<td><input type="checkbox" id="checkbox-3-1"></td>
<td><input type="checkbox" id="checkbox-3-2"></td>
<td><input type="checkbox" id="checkbox-3-3"></td>
</tr>
</table>
// 获取表格元素
var table = document.querySelector('table');
// 监听表格的点击事件
table.addEventListener('click', function(event) {
var target = event.target;
// 检查点击的元素是否为复选框
if (target.type === 'checkbox') {
var checkboxId = target.id;
var checkbox = document.getElementById(checkboxId);
// 获取行和列的索引
var rowIndex = checkboxId.split('-')[1];
var colIndex = checkboxId.split('-')[2];
// 根据行和列的索引进行相应的操作
if (rowIndex === '1' && colIndex === '1') {
// 第一行第一列的复选框被点击
// 执行相应的操作
} else if (rowIndex === '2' && colIndex === '2') {
// 第二行第二列的复选框被点击
// 执行相应的操作
} else {
// 其他情况
// 执行相应的操作
}
}
});
通过以上步骤,你可以根据响应的行和列显示和禁用复选框。根据具体需求,你可以在相应的操作中执行你想要的功能,比如修改复选框的状态、更新数据等。
腾讯云相关产品和产品介绍链接地址:
就可以添加复选框的功能了。 所以将复选框搞出来以后,就开始将获取到选择的数据值了。 |
---|