js table选中row

在JavaScript中，实现表格（table）行（row）选中功能通常涉及到DOM操作和事件处理。以下是相关的基础概念、优势、类型、应用场景以及实现方法：

基础概念

DOM操作：JavaScript可以通过DOM API来访问和修改HTML文档的内容和结构。
事件处理：通过监听用户的交互事件（如点击事件），可以触发相应的JavaScript代码。

优势

用户体验：允许用户通过点击行来选中，提高了交互性和用户体验。
数据操作：选中的行可以用于进一步的数据操作，如编辑、删除或查看详细信息。

类型

单选：一次只能选中一行。
多选：可以同时选中多行。

应用场景

数据表格：在显示大量数据的表格中，用户可以通过选中行来进行批量操作。
表单编辑：在需要编辑数据的表单中，选中行可以高亮显示当前编辑的数据。

实现方法

以下是一个简单的示例代码，展示如何实现表格行的选中功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Row Selection</title>
    <style>
        .selected {
            background-color: #cce5ff;
        }
    </style>
</head>
<body>
    <table id="myTable" border="1">
        <tr><th>ID</th><th>Name</th></tr>
        <tr><td>1</td><td>Alice</td></tr>
        <tr><td>2</td><td>Bob</td></tr>
        <tr><td>3</td><td>Charlie</td></tr>
    </table>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const table = document.getElementById('myTable');
            const rows = table.getElementsByTagName('tr');

            for (let i = 1; i < rows.length; i++) { // Start from 1 to skip the header row
                rows[i].addEventListener('click', function() {
                    // Remove selected class from all rows
                    for (let j = 1; j < rows.length; j++) {
                        rows[j].classList.remove('selected');
                    }
                    // Add selected class to the clicked row
                    this.classList.add('selected');
                });
            }
        });
    </script>
</body>
</html>

解释

HTML部分：定义了一个简单的表格，包含表头和几行数据。
CSS部分：定义了一个.selected类，用于高亮显示选中的行。
JavaScript部分：
- 在文档加载完成后，获取表格和所有行。
- 为每一行（除了表头）添加点击事件监听器。
- 当某一行被点击时，移除所有行的.selected类，然后为被点击的行添加.selected类。