JS 处理table行事件，取当前行的值

在处理包含多行的表格时，如果你想判断在录入部门信息之前当前行的姓名是否已经录入，可以通过JavaScript实现这个功能。以下是一个基本的实现思路：

1. 获取当前行的元素：当用户开始输入部门信息时，需要知道当前是哪一行。
2. 检查姓名输入框：获取当前行的姓名输入框的值，判断其是否为空。
3. 给出提示：如果姓名未录入，给出相应的提示。

假设你的表格有一个唯一的标识符（例如，每行都有一个唯一的ID），或者你可以通过事件委托来管理事件。以下是一个使用事件委托的例子：

HTML 结构（简化版）

<table id="myTable">  
    <tbody>  
        <!-- 表格行，可以动态添加更多 -->  
        <tr>  
            <td><input type="checkbox" /></td>  
            <td><input type="text" class="user-id" /></td>  
            <td><input type="text" class="user-name" /></td>  
            <td><input type="text" class="department" oninput="checkName(this)" /></td>  
            <td><input type="text" class="position" /></td>  
            <td><textarea class="remarks"></textarea></td>  
        </tr>  
        <!-- 更多行... -->  
    </tbody>  
</table>

JavaScript

function checkName(input) {  
    // 找到当前输入的父级tr元素  
    var row = input.closest('tr');  
    // 获取当前行的姓名输入框  
    var nameInput = row.querySelector('.user-name');  
    // 获取姓名输入框的值  
    var name = nameInput.value.trim();  
  
    // 检查姓名是否为空  
    if (name === '') {  
        // 给出提示，这里只是简单地打印到控制台，实际可以显示在页面上或弹出警告  
        console.warn('请先录入姓名！');  
        // 清除当前输入框的内容（可选）  
        input.value = '';  
        // 可以设置输入框样式以突出显示错误（可选）  
        input.style.borderColor = 'red';  
    } else {  
        // 如果姓名已录入，可以恢复输入框样式（如果有设置错误样式的话）  
        input.style.borderColor = '';  
    }  
}  
  
// 如果表格是动态生成的，可能需要为整个表格添加事件监听器，使用事件委托  
document.getElementById('myTable').addEventListener('input', function(event) {  
    if (event.target.classList.contains('department')) {  
        checkName(event.target);  
    }  
});

说明

1. 事件委托：由于表格行可能是动态添加的，直接在每个输入框上添加事件监听器可能不太方便。因此，我们可以在表格的<tbody>或整个<table>上添加一个事件监听器，然后检查事件目标（event.target）是否是我们关心的输入框。

2. 样式提示：在示例中，我们通过改变输入框的边框颜色来给出提示。你可以根据需要修改或添加更多的提示方式，比如在页面上显示错误消息。

3. 用户体验：在实际应用中，你可能希望以更友好的方式向用户展示错误信息，比如使用模态框、提示条等。

这样，每当用户在部门输入框中输入时，JavaScript函数checkName就会被调用，检查同一行的姓名是否已经录入。