使用JavaScript提取网页中的表格 行列数据 批量提取

JS 专栏收录该内容
98 篇文章 1 订阅

场景

有时候上网查阅资料,需要网页中表格内、指定行列的数据。
(本例操作的表格地址:mime类型)
如果表格小(操作的 数据量小),可以手动复制粘贴。
但如果要操作的表格很大,那么可以使用程序自动执行遍历表格的操作,并提取数据。

看懂以下教程需要会:

  • JavaScript简单语法;
  • 浏览器DevTools(即F12快捷键呼出的界面);

Code

  • 选中表格元素
    F12调出DevTools,切换到控制台Console
    Ctrl+Shift+C,鼠标点击网页中的表格。
    之后在控制台输入$0,可以打印出最近一次在页面中选中的元素。
    一定要选中表格。再执行以下操作。

  • 执行代码(遍历元素)

var tbody = $0;             // 获取刚才鼠标点击选中的表格
var trArr = tbody.children;       // 表格的所有子节点
for (var i = 0; i < tbody.childElementCount; i++) {
    var tr = trArr[i];  // 第i+1行
    var tdArr = tr.children;    // 获取本行的单元格列表
    var a = tdArr[0].innerText;    // 第一列(扩展名)
    var b = tdArr[1].innerText;    // 第二列
    var c = tdArr[2].innerText;    // 第三列
    console.log("行数:%d  %s  %s  %s", i+1, a, b, c);
}

控制台执行结果如下:

在这里插入图片描述当然以上代码只是数据提取测试。
打印出结果后,可以从控制台复制结果数据(当然如果需要复制数据的话,需要调整一下输出格式。不要每行都输出一次,这样不好复制)。

var result = "";
var tbody = $0;             // 获取刚才鼠标点击选中的表格
var trArr = tbody.children;       // 表格的所有子节点
for (var i = 0; i < tbody.childElementCount; i++) {
    var tr = trArr[i];  // 第i+1行
    var tdArr = tr.children;    // 获取本行的单元格列表
    var a = tdArr[0].innerText;    // 第一列(扩展名)
    var b = tdArr[1].innerText;    // 第二列
    var c = tdArr[2].innerText;    // 第三列
    result += `${a}  ${b} ${c}\n`;
}
console.log(result);	// 一次性打印提取到的数据

查看DOM元素对应的JavaScript的类型

首先:DOM元素对象也属于JavaScript对象
使用Object.prototype.toString.call(变量名)可以获取变量的类型。

tbody    // 获取到的表格的DOM元素
Object.prototype.toString.call(tbody);    // 表格DOM元素的JS类型


tbody.children[0]    // 行的DOM元素
Object.prototype.toString.call(tbody.children[0]);    // 行的DOM元素的JS类型


tbody.children[0].children[0]    // 单元格
Object.prototype.toString.call(tbody.children[0].children[0])    // 单元格的JS类型


Object.prototype.toString.call(tbody.children)
Object.prototype.toString.call(tbody.children[0].children)

执行结果如下:

在这里插入图片描述可以看到:

DOM元素标签JavaScript对象类型
tbodyHTMLTableSectionElement
trHTMLTableRowElement
tdHTMLTableCellElement
多个tr或多个tdHTMLCollection
  • 3
    点赞
  • 0
    评论
  • 14
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值