Flutter如何抓取页面中两个class名相同的表格？

你已经通过document.getElementsByClassName('online')[0]获取到第一个表格，要抓取第二个表格，只需要将索引从0改为1即可。为了避免重复代码、提升可维护性，建议把表格解析逻辑封装成独立函数，这样两个表格的解析都能复用同一套逻辑。

修改后的完整代码示例 #

Future extractBothTables() async {
  // 请求目标页面
  final response = await http.Client().get(Uri.parse('http://rte.arso.gov.si/zrak/kakovost%20zraka/podatki/dnevne_koncentracije.html'));
  
  if (response.statusCode == 200) {
    var document = parser.parse(response.body);
    datalist.clear();
    datalist.add("");
    
    // 获取页面中所有class为"online"的表格
    var tables = document.getElementsByClassName('online');
    
    // 确保页面存在至少两个目标表格
    if (tables.length >= 2) {
      // 解析第一个表格
      var table1Data = parseTable(tables[0]);
      // 解析第二个表格
      var table2Data = parseTable(tables[1]);
      
      // 可根据业务需求处理两个表格的数据，比如存入不同变量
      print('第一个表格数据行数: ${table1Data.length}');
      print('第二个表格数据行数: ${table2Data.length}');
    } else {
      print('页面中未找到两个class为"online"的表格');
    }
  } else {
    print('请求失败，状态码: ${response.statusCode}');
  }
}

// 封装表格解析逻辑，实现代码复用
List<List<String?>> parseTable(Element table) {
  List<List<String?>> tableData = [];
  try {
    var rows = table.getElementsByTagName('tr');
    if (rows.isEmpty) return tableData;
    
    var cols = rows[0].getElementsByTagName('th');
    tableData = List.generate(rows.length, (_) => List<String?>.generate(cols.length, (_) => null));
    
    var r = 0;
    for (var row in rows) {
      cols = row.getElementsByTagName(r == 0 ? 'th' : 'td');
      var c = 0;
      for (var col in cols) {
        tableData[r][c] = utf8.decode(latin1.encode(col.text), allowMalformed: true);
        c++;
      }
      r++;
    }
  } catch (e) {
    print('解析表格出错: $e');
  }
  return tableData;
}

关键说明 #

• document.getElementsByClassName('online')会返回页面中所有class为"online"的元素集合，索引从0开始，第二个表格对应索引1
• 封装parseTable函数后，无需重复编写解析逻辑，后续如果要解析更多同结构表格也能直接调用
• 增加表格数量判断，可避免因页面结构变动导致的索引越界问题

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