复选框变更时，如何判断表格行单元格是否存在文本框并取值？

问题 #

现有id为table_wf的表格，列结构如下：

• 第一列是A、B这类代码
• 第二列是占位文本
• 第三列可能包含text类型input或为空
• 第四列是复选框

需求：当复选框状态变更时，拼接第一列文本+第三列文本框的值（若存在），比如第一行结果为A，第二行结果为B22。

目前已能获取第一列内容，但尝试使用rows[i].cells.find、rows[i].find判断第三列是否存在文本框时，均报错“不是函数”，寻求可行实现方案。

现有代码：

JS代码 #

var result = '';
var rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
for (var i = 0; i < rows.length; i++) {
    var row = rows[i]
    result += rows[i].cells[0].innerHTML;
    var v = rows[i].cells.find("td input[type=text]");
    if (rows[i].cells.find("input[type=text]").length) {
    } 
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="table_wf">
    <tbody>
      <tr>
        <td>A</td>
        <td>Some Dummy Text</td>
        <td></td>
        <td><input id="chk_001" type="checkbox" selected></td>
      </tr>
      <tr>
        <td>B</td>
        <td>Some Dummy Text</td>
        <td><input id="text_002" type="text" value="22"/></td>
        <td><input id="chk_002" type="checkbox" selected/></td>
      </tr>
    </tbody>
</table>

解决方案 #

为啥报错？因为rows[i]是原生DOM元素，cells是原生DOM集合，它们根本没有jQuery的find()方法。要么把原生DOM转成jQuery对象，要么用原生DOM的方法查找元素，两种方案都给你：

方案一：jQuery实现（和现有代码风格一致） #

// 给所有复选框绑定状态变更事件
$("#table_wf input[type='checkbox']").on('change', function() {
    let result = '';
    // 获取所有选中复选框所在的行
    const rows = $("#table_wf tbody tr input[type='checkbox']:checked").closest('tr');
    
    rows.each(function() {
        // 取第一列的文本内容
        const code = $(this).find('td:first').text().trim();
        result += code;
        
        // 定位当前行第三列的文本框
        const textInput = $(this).find('td:nth-child(3) input[type="text"]');
        if (textInput.length) {
            // 存在文本框就追加它的值
            result += textInput.val().trim();
        }
        // 如需给不同行结果加分隔符，比如空格，可在此添加：result += ' ';
    });
    
    console.log(result); // 例如选中两行时输出 "AB22"，按需调整格式
});

关键调整说明

• 把原生行元素转成jQuery对象$(this)，才能使用find()方法查找子元素
• 用td:first和td:nth-child(3)精准定位目标列，比原生cells[index]写法更直观
• 绑定change事件，复选框状态变更时自动触发拼接逻辑
• 用trim()去除文本前后空格，避免结果出现无效空白字符

方案二：原生JS实现（无需依赖jQuery） #

如果不想用jQuery，直接用原生DOM API也能实现需求：

// 给所有复选框绑定change事件
document.querySelectorAll("#table_wf input[type='checkbox']").forEach(checkbox => {
    checkbox.addEventListener('change', () => {
        let result = '';
        // 获取所有选中的复选框
        const checkedBoxes = document.querySelectorAll("#table_wf tbody tr input[type='checkbox']:checked");
        
        checkedBoxes.forEach(chk => {
            const row = chk.closest('tr');
            // 取第一列文本内容
            const code = row.cells[0].textContent.trim();
            result += code;
            
            // 查找第三列中的文本框
            const textInput = row.cells[2].querySelector('input[type="text"]');
            if (textInput) {
                result += textInput.value.trim();
            }
        });
        
        console.log(result);
    });
});

内容的提问来源于stack exchange，提问作者Saurabh