如何在表中选择tr同级和输入项

要在HTML表格中选择同一行的<tr>元素和输入项，可以使用JavaScript来实现。以下是一些基础概念和相关方法：

基础概念

DOM（文档对象模型）：DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
事件委托：事件委托是一种设计模式，利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是每个子元素上。

类型与应用场景

类型：主要涉及DOM操作和事件处理。
应用场景：适用于任何需要在表格中处理用户交互的场景，如表单验证、数据编辑等。

示例代码

以下是一个示例，展示如何在表格中选择同一行的<tr>元素和输入项：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Selection Example</title>
    <style>
        .selected {
            background-color: #ffff99;
        }
    </style>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <td><input type="text" value="Item 1"></td>
            <td>Detail 1</td>
        </tr>
        <tr>
            <td><input type="text" value="Item 2"></td>
            <td>Detail 2</td>
        </tr>
        <tr>
            <td><input type="text" value="Item 3"></td>
            <td>Detail 3</td>
        </tr>
    </table>

    <script>
        document.getElementById('myTable').addEventListener('click', function(event) {
            // Remove previous selection
            var previouslySelected = document.querySelector('.selected');
            if (previouslySelected) {
                previouslySelected.classList.remove('selected');
            }

            // Select the clicked row
            var targetRow = event.target.closest('tr');
            if (targetRow) {
                targetRow.classList.add('selected');
            }
        });
    </script>
</body>
</html>

解释

HTML结构：创建一个简单的表格，每行包含一个输入框和一些描述性文本。
CSS样式：定义一个.selected类，用于高亮显示选中的行。
JavaScript逻辑：
- 使用addEventListener将点击事件绑定到表格上。
- 在事件处理函数中，首先移除之前选中的行的.selected类。
- 使用event.target.closest('tr')找到被点击的行，并为其添加.selected类。