表格复选框选中行转JSON失效：获取数据为null求助

你遇到的问题核心是获取表格单元格的方式错误，还有表头处理需要跳过复选框列。让我一步步帮你修正：

问题分析 #

• 你用$(this).find("td")来获取单元格，但$(this)指向的是选中的复选框元素，复选框本身没有子元素td，所以得到的是空集合，自然取不到数据。
• 表头第一列是对应复选框的空白列，我们不需要把这个列的键值对加入JSON，所以要跳过这个表头项。

修正后的代码 #

<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<table cellspacing="0" rules="all" border="1" id="Table1" style="border-collapse: collapse;">
<tr>
<th>&nbsp;</th>
<th style="width:80px">Customer Id</th>
<th style="width:120px">Name</th>
<th style="width:120px">Country</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
<br />
<input id="btnGet" type="button" value="Get Selected" />

<script>
$(document).ready(function() { 
    $("#btnGet").click(function() { 
        var data = []; 
        // 获取表头，跳过第一个空白列
        var $headers = $("#Table1").find("th").slice(1); 
        // 找到所有选中复选框所在的行
        $("#Table1").find("tbody tr input[type=checkbox]:checked").each(function() { 
            var $row = $(this).closest("tr"); // 获取当前复选框所在的行
            var $cells = $row.find("td").slice(1); // 跳过第一个复选框所在的td
            var rowData = {};
            $cells.each(function(cellIndex) { 
                // 用表头文本作为键，单元格内容作为值
                rowData[$($headers[cellIndex]).text().trim()] = $(this).text().trim(); 
            });
            data.push(rowData); // 将行数据加入数组
        }); 
        alert(JSON.stringify(data)); 
    }); 
});
</script>

关键改动说明 #

• 用$(this).closest("tr")获取复选框所在的行，而不是直接找td
• 用slice(1)跳过表头和单元格的第一列（复选框列），避免无效的空键
• 使用text().trim()来获取文本内容并去除多余空格，让JSON更整洁
• 改用push()方法向数组添加元素，比直接用索引赋值更稳妥

这样修改后，点击按钮就能正确输出选中行的JSON数据啦！

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