如何将HTML表格按td标签class名转换为指定格式JavaScript数组

错误原因 #

• 选择器匹配错误：你使用的$("table#grid tr")用于匹配id为grid的表格，但示例HTML中的表格是class为grid，选择器不匹配导致没有获取到对应元素
• class属性获取方法错误：jQuery没有className()方法，正确获取class属性的方式是调用attr('class')，或者直接使用原生DOM属性this.className

修正后的jQuery代码 #

var myTableArray = [];
// 修正选择器，匹配class为grid的table
$("table.grid tr").each(function() { 
    var arrayOfThisRow = [];
    var tableData = $(this).find('td');
    if (tableData.length > 0) {
        // 修正获取class的逻辑
        tableData.each(function() { arrayOfThisRow.push($(this).attr('class')); });
        myTableArray.push(arrayOfThisRow);
    }
});
console.log(myTableArray);
// 输出结果：[["available","busy","busy","available"],["busy","available","busy","available"]]

可选：原生JavaScript实现（无需依赖jQuery） #

const myTableArray = Array.from(document.querySelectorAll('table.grid tr')).map(tr => {
  return Array.from(tr.querySelectorAll('td')).map(td => td.className)
}).filter(row => row.length > 0)
console.log(myTableArray)

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