您可以使用以下示例代码来隐藏多选框(checkbox)并实现点击行时获取该行的ID:
<table id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Mike</td>
<td>35</td>
</tr>
</tbody>
</table>
<script>
var selectedRowId = null;
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener("click", function() {
var id = this.cells[0].innerText;
console.log("当前行的ID为:" + id);
selectedRowId = id;
});
// 隐藏多选框
var checkbox = rows[i].querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.style.display = 'none';
}
}
</script>
点击时,给表格行添加颜色
var selectedRowId = null;
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].addEventListener("click", function() {
var id = this.cells[0].innerText;
console.log("当前行的ID为:" + id);
selectedRowId = id;
// 移除之前被选中的行的样式和值
var prevSelected = document.querySelector(".highlight");
if (prevSelected) {
prevSelected.classList.remove("highlight");
}
// 为当前被选中的行添加样式和值
this.classList.add("highlight");
});
// 隐藏多选框
var checkbox = rows[i].querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.style.display = 'none';
}
}
颜色样式
<style>
.highlight {
background-color: #d6dede !important;
}
</style>
在这个示例中,我们首先遍历表格的每一行,当点击行时,会获取该行的ID并将其输出到控制台。另外,我们在遍历过程中寻找每一行中的多选框,并将其样式设置为隐藏。