JavaScript实现Map获取ID集合与单行点击选中功能

该资源是一个关于JavaScript（JS）如何利用Map数据结构来收集元素ID并实现点击表格行选中功能的示例。示例代码展示了一个包含两行数据的表格，每行都有一个与之关联的ID，以及一个全选的复选框。 在JavaScript中，Map是一种内置的数据结构，它允许我们存储键值对，其中键可以是任何类型，而不仅仅是字符串。在这个例子中，Map可能被用来存储表格行的ID和对应的行元素引用，以便在用户点击某行时能够快速访问和操作。 代码片段中，每个`<tr>`元素都有一个ID（例如：box1, box2, box3, box4），这表明它们可能是Map中的键。当用户点击某一行时，对应的行ID会被获取，然后利用这个ID来选中或取消选中该行。实现这个功能通常会涉及到事件监听器，如`addEventListener('click', function)`，在这个函数中，你可以检查被点击的行ID，并更新其状态。 此外，注意到表格中还有`<input type="checkbox">`元素，这暗示了选中行的功能可能与这些复选框有关。通过监听复选框的点击事件，可以实现选中或取消选中所有行的功能。例如，当用户点击“全选”复选框时，可以遍历Map中的所有行ID，设置它们对应的复选框状态。 为了实现这一功能，可以编写以下JavaScript代码： ```javascript // 初始化Map，存储行ID和复选框元素 let rowMap = new Map(); // 假设已经将表格行的ID和复选框添加到rowMap // 添加全选/全不选功能 document.getElementById('btn').addEventListener('change', function() { let isChecked = this.checked; rowMap.forEach((checkbox, id) => { checkbox.checked = isChecked; }); }); // 添加单行点击选中功能 document.querySelectorAll('#selectable tr').forEach(tr => { tr.addEventListener('click', function() { let id = this.id; let checkbox = rowMap.get(id); if (checkbox) { checkbox.checked = !checkbox.checked; } }); }); ``` 以上代码首先创建了一个Map来存储行ID及其对应的复选框元素，然后为“全选”复选框添加事件监听器，当其状态改变时，更新所有行的选中状态。同时，为表格中的每一行添加点击事件监听器，使得点击行时能切换该行的选中状态。 这个示例展示了如何结合HTML、CSS和JavaScript来实现交互式表格功能，特别是利用Map数据结构来优化查找和操作过程。在实际应用中，可能还需要考虑其他因素，如性能优化、无障碍访问（accessibility）和浏览器兼容性等。