【油猴脚本】00011 案例 Tampermonkey油猴脚本，动态渲染表格-实现页面动态-添加提取数据的目标的位置输入框，并抓取数据，仅用于学习，不要乱操作HTML+Css+JavaScript编写

最新推荐文章于 2026-02-21 00:19:17 发布
原创 最新推荐文章于 2026-02-21 00:19:17 发布 · 2.4k 阅读 · 40 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#学习 #html #css #前端 #jquery
#javascript #tampermonkey
Python3.8

Python3.8

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

共同探索软件研发！敬请关注【宝码香车】
csdngif标识

目录

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

【油猴脚本】00011 案例 Tampermonkey油猴脚本，动态渲染表格-实现页面动态-添加提取数据的目标的位置输入框，并抓取数据，仅用于学习，不要乱操作,HTML+Css+JavaScript编写

使用的库：

Bootstrap的Css库CDN:

https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

Jquery库CDN：

 https://code.jquery.com/jquery-1.9.1.min.js

Jquery的库easyuijs CDN：

https://www.jeasyui.com/easyui/jquery.easyui.min.js

📚一、效果

-添加提取数据的目标的位置输入框

描述

-抓取数据

描述

📚二、核心解析

💡1.提取数据的位置输入框html：

 <span>数据位置:</span><input type="text"  class="form-control"  value="${dataOptionStr}">

💡2.JavaScript：

修改多列渲染函数

 //动态渲染列
  const colsRender = (optionStr,dataOptionStr)=>{
    if(!dataOptionStr){
      dataOptionStr = '无参数，请填写参数，参数是css选择器'
    }
    let str = `
    <div class="form-group">
       <div class="item">
         <span>列名称:</span><span class="delCol" style="margin-left: 20px;cursor:pointer;">删除此列</span><input type="text"  class="form-control"  value="${optionStr}"> 
         <span>数据位置:</span><input type="text"  class="form-control"  value="${dataOptionStr}"> 
      </div>
    </div>
    `
    return str;
  }

  //动态渲染多列函数
  const colsMoreRender = (strArrOpt)=>{
    let str = ''
    for(const x in strArrOpt){
      if(cssSelectorArr.length>0){
        str += colsRender(strArrOpt[x],cssSelectorArr[x])
      }else{
        str += colsRender(strArrOpt[x])
      }
    }
    return str;
  }
  
 //获取修改的数据
  const getFormData = ()=>{
    let strArr = []
    $('#editTableColsModal .modal-body .form-group input').each(function(idx,eleItm){
      let formName = ''; //获取列名称
      let cssName = '' //获cssSelector名称
      let $eleItem = $(eleItm);
      if(idx%2===0){
         formName = $eleItem.val(); //获取列名称
         strArr.push(formName)
      }else{
         cssName = $eleItem.val() //获cssSelector名称
         cssSelectorArr.push(cssName)
      }
    })
    return strArr;
  }

运行按钮事件的修改

  //点击 - 运行按钮
  $('#run').click(function(){
    msg('正在抓取，当前页数据')
    let eleTotalColArr = []  //总计
    //获取数据组成二维数组
    cssSelectorArr.forEach(function(item,idx){
      let eleByColArr = []     //单项
      $(item).each(function(idex,ite) {
        eleByColArr.push($(ite).text())
      })
      eleTotalColArr.push(eleByColArr)
    })

    //把数据组装成html元素
    let trs = ''  //一行单元格
    let totalLIneNum = eleTotalColArr[0].length; //总行数
    let fieldNum = eleTotalColArr.length; //每行的单元格数量
    for (let i=0;i<totalLIneNum;i++){
      //根据
      let tds = ''

      for(let i2 = 0;i2<fieldNum;i2++){
         //一个数据
        tds += `<td>${eleTotalColArr[i2][i]}</td>`
      }
      trs += `<tr>${tds}</tr>`
    }


    $('.table-card tbody').css({"height":"200px","overflow-y":"scroll"}).html(trs);
    msg('抓取当前页，数据完成')

  })

📚三、完整源代码，可以直接复制使用

✍️JavaScript

// ==UserScript==
// @name         动态渲染表格-实现页面动态-添加提取数据的目标的位置输入框，并抓取数据
// @namespace    http://tampermonkey.net/
// @version      2024-09-12
// @description  动态渲染表格
// @author       CSDN@宝码香车
// @match        https://developer.mozilla.org/zh-CN/
// @match        https://www.zhipin.com/web/geek/job?query=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88&city=101120900&areaBusiness=371329
// @resource bootstrapCss https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css
// @require      https://code.jquery.com/jquery-1.9.1.min.js
// @require      https://www.jeasyui.com/easyui/jquery.easyui.min.js
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @run-at       document-end
// ==/UserScript==


(function () {
  'use strict';

  let tableHtml = `
    <div class="col-md-8 table-card" style="padding:1em;">
     <div id="draggableArea">拖拽这里移动表格</div>
      <div  class="toolsArea">
       <span id="editCols" class="editCols">编辑表格-列</span>
      </div>
      <div  class="actionArea">
       <span id="run" class="run">运行</span>
      </div>
      <div class="table-responsive">
       <table class="table table-bordered table-striped" id="test_table">
       </table>
     </div>
       <div class="msgWrap col-md-8">
          <div class="msgContent">
            
          </div>
       </div>
    </div>
    `
  let cssMore = `
   #draggableArea,.toolsArea,.actionArea{padding:10px;background:#f5f5f5;}
   .form-group{border-bottom:2px solid #E95C8A;padding:8px;}
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
   .editCols,.run{
    padding: 2px 5px;background:#f5f5f5;cursor: pointer;
   }
   .modal-body{
    height:300px;
    overflow-y: scroll;
   }
   .msgWrap{
    padding:10px;
    margin-top:10px;
   }
   .msgContent{
    max-height:300px;
   }
   .msgContent{
    background:#000;
   }
   .loadMsg{
    color:#fff;
    width: fit-content;
    font-size: 16px;
    font-family: monospace;
    clip-path: inset(0 3ch 0 0);
    animation: loadMsgAni 1s steps(4) infinite;
   }
   @keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}}
   .table-card tbody{
      display:block;
      overflow:auto;
      height:200px;
      width:100%;
   }
   table thead,
   tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    }
   .table-card tbody{display:block;height:200px;overflow-y:scroll;}
  `
  let bsCss = GM_getResourceText('bootstrapCss')
  GM_addStyle(bsCss)
  GM_addStyle(cssMore)
  $('body').append(tableHtml)

  $('.table-card').draggable({
    handle: '#draggableArea'
  })

  // 初始化列
  const initCols = (strArr)=>{
    let addTableHtml = `<thead><tr>`
    for (const x of strArr) {
      addTableHtml += `<td>${x}</td>`;
    }
    addTableHtml += `</tr></thead>`;
    addTableHtml += '<tbody><tr>'
    for (const y of strArr) {
      addTableHtml += `<td>默认无值</td>`;
    }
    addTableHtml += `</tr></tbody>`
    return addTableHtml
  }
  //定义表格列
  // let tableColsArr = ['姓名','省份','城市','性别','职业','年龄'] //列名称
  let tableColsArr = ['公司名称','招聘职位','薪资'] //列名称
  let cssSelectorArr = [] //列的数据提取位置
   cssSelectorArr.push('.job-card-wrapper .job-card-right .company-name a')
   cssSelectorArr.push('.job-card-wrapper .job-card-left .job-title .job-name')
   cssSelectorArr.push('.job-card-wrapper .job-card-left .salary')
  let initColHtml = initCols(tableColsArr)
  // 把动态渲染的表格内容，添加到页面中的table位置
  $('#test_table').html(initColHtml);

  //弹出框，编辑表格-列
  let editTableCols = `
  <div class="modal" id="editTableColsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">编辑表格-列</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="colseBtn">&times;</span></button>
              </div>
              <form class="modal-body">
              </form>
              <div class="modal-footer">
                  <button type="button" id="btn_addCol" class="btn btn-primary" style="float: left" data-dismiss="modal">添加一列</button>
                  <button type="button" class="btn btn-default colseBtn" data-dismiss="modal">关闭</button>
                  <button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">保存</button>
              </div>
          </div>
      </div>
  </div>
  `
  //动态渲染列
  const colsRender = (optionStr,dataOptionStr)=>{
    if(!dataOptionStr){
      dataOptionStr = '无参数，请填写参数，参数是css选择器'
    }
    let str = `
    <div class="form-group">
       <div class="item">
         <span>列名称:</span><span class="delCol" style="margin-left: 20px;cursor:pointer;">删除此列</span><input type="text"  class="form-control"  value="${optionStr}"> 
         <span>数据位置:</span><input type="text"  class="form-control"  value="${dataOptionStr}"> 
      </div>
    </div>
    `
    return str;
  }

  //动态渲染多列函数
  const colsMoreRender = (strArrOpt)=>{
    let str = ''
    for(const x in strArrOpt){
      if(cssSelectorArr.length>0){
        str += colsRender(strArrOpt[x],cssSelectorArr[x])
      }else{
        str += colsRender(strArrOpt[x])
      }
    }
    return str;
  }

  //渲染多列
  let colsMoreStr = colsMoreRender(tableColsArr)
  $('body').append(editTableCols); //弹出窗口添加到页面中
  $('#editTableColsModal .modal-body').html(colsMoreStr)

  //获取修改的数据
  const getFormData = ()=>{
    let strArr = []
    $('#editTableColsModal .modal-body .form-group input').each(function(idx,eleItm){
      let formName = ''; //获取列名称
      let cssName = '' //获cssSelector名称
      let $eleItem = $(eleItm);
      if(idx%2===0){
         formName = $eleItem.val(); //获取列名称
         strArr.push(formName)
      }else{
         cssName = $eleItem.val() //获cssSelector名称
         cssSelectorArr.push(cssName)
      }
    })
    return strArr;
  }

  // 点击-编辑列按钮
  $("#editCols").click(function(){
    $('#editTableColsModal').show() //打开弹出窗口
  })
  // 点击-关闭按钮
  $(".colseBtn").click(function(){
    $('#editTableColsModal').hide() //关闭弹出窗口
  })
  // 点击-保存按钮
  $("#btn_submit").click(function(){
    $('#editTableColsModal').hide() //关闭弹出窗口
    let renderColHtml = initCols(getFormData())
    //渲染到页面上
    $('#test_table').html(renderColHtml);
  })

  //表格-删除列事件函数
  $(".modal-body").on('click','.delCol',function(){
    console.log($(this).parents('.form-group'))
    if($('.form-group').length === 1){
      alert('至少保留一个列')
      return false;
    }
    $(this).parents('.form-group').remove();
  })

  //添加一列的点击事件
  $('#btn_addCol').on('click',function(){
    $('.modal-body').append(colsRender('新列请重新命名'))
  })

  //点击 - 运行按钮
  $('#run').click(function(){
    msg('正在抓取，当前页数据')
    let eleTotalColArr = []  //总计
    //获取数据组成二维数组
    cssSelectorArr.forEach(function(item,idx){
      let eleByColArr = []     //单项
      $(item).each(function(idex,ite) {
        eleByColArr.push($(ite).text())
      })
      eleTotalColArr.push(eleByColArr)
    })

    //把数据组装成html元素
    let trs = ''  //一行单元格
    let totalLIneNum = eleTotalColArr[0].length; //总行数
    let fieldNum = eleTotalColArr.length; //每行的单元格数量
    for (let i=0;i<totalLIneNum;i++){
      //根据
      let tds = ''

      for(let i2 = 0;i2<fieldNum;i2++){
         //一个数据
        tds += `<td>${eleTotalColArr[i2][i]}</td>`
      }
      trs += `<tr>${tds}</tr>`
    }


    $('.table-card tbody').css({"height":"200px","overflow-y":"scroll"}).html(trs);
    msg('抓取当前页，数据完成')

  })

  //提示信息框
  function msg(msgStr){
    let msgHtml = ` <div class="loadMsg">${msgStr}•••</div>`
    $('.msgWrap .msgContent').append(msgHtml)

  }




  // Your code here...
})();

📚四、使用此代码的方法：

1.浏览器打开https://developer.mozilla.org/zh-CN/
2.把代码复制进油猴脚本，打开运行开关，刷新页面

  • 安装教程：👉 https://blog.csdn.net/qq_33650655/article/details/142097760
  • 使用教程：👉 https://blog.csdn.net/qq_33650655/article/details/142183047

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作

您可能感兴趣的与本文相关的镜像

Python3.8

Python3.8

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

傻瓜式提取网页数据的油猴脚本（JavaScript 代码）
澄南澄北的博客
11-17 1万+
一次性提取任意网站的布局类似的数据，例如 淘宝的商品价格、微博的热搜标题、必应搜索的图片链接。使用JavaScript实现，配置到Tampermonkey（油猴）中即可使用。
油猴脚本更改tw样式
qq_44274233的博客
07-13 1062
date:2022/07/23 title:编写油猴脚本更改tw作业样式 tag:脚本 编写油猴脚本更改tw作业样式 需求 如图1,作答后的作业颜色暗淡,不便复习 更改后如图2,变丑了但是显眼一些 原页面与更改后页面 原页面与更改后页面 图一 图二 代码 @grant处引入油猴脚本的GM_addStyle 用style变量中定义css字符串 并调用GM_addStyle(style)使样式生效 代码 // ==UserScript== // @name .
tampermonkey(油猴) GM_addStyle
pal97的博客
09-29 5859
tampermonkey(油猴) GM_addStyle tampermonkey脚本中 GM_addStyle的教程很少，连自身的文档都没有案例，网上查了很久，自己记录一下。 var ads=["iframe",".layout-header",".layout-footer",".xuexi",".WNiH6aSBS23IzewzHGi4v",'audio',".redflag-2","div[style='background-repeat: no-repeat;']",".my-points-
【教程】油猴脚本开发入门教程
码的世界
06-14 3万+
右击顶部工具栏中的油猴插件图标，在弹出的操作框中选择添加新脚本。 之后你将进入一个编辑页面，我们来看看在这个编辑页面中一些基本的知识点。 这里重要的点有两个，一个是设置匹配的网站，默认的初始生成的代码中，没有对 https 的网址进行匹配，仅对 http 网址进行了匹配，所以要自己添加。第二个就是通过 标签来添加你本地的文件地址，这样当你在本地进行开发的代码，就可以直接在对应的网站上执行了。当用户使用 请求远程数据的时候，需要使用 connect 指定允许访问的域名，支持域名、子域名、IP地址以及
在油猴脚本中添加css样式的方法
qq_33298964的博客
03-21 6824
由于项目要求，需要在系统页面注入dom元素，且对这些注入的元素在UI界面层有美观度要求，就避免不了要对其CSS样式优化。以上是在油猴脚本中添加UI样式的方法。二、使用油猴自带样式添加请求。
GM_addStyle :Tampermonkey百度去除广告
2302_76854318的博客
12-18 938
使用纯CSS或GM_addStyle库，我们可以在TamperMonkey脚本中模拟GM_addStyle函数的功能，实现动态添加CSS样式表。这可以让我们对网页的样式进行自定义，提升用户体验。在TamperMonkey中，我们可以使用纯CSS来添加样式。通过在脚本中嵌入CSS代码块，我们可以直接修改网页的样式。也可以使用GM_addStyleTamperMonkey脚本中的GM_addStyle库。
网页脚本 bilibili003：字幕展示功能的脚本说明（笔记）
ResumeProject的博客
02-19 2039
使用函数为页面添加一些自定义样式，用于美化页面或调整特定元素的样式GM_addStyle(` // 自定义样式的定义// ... `);flex: none;width:66px;`);// 数字格式化的逻辑// ...// 时间解析的逻辑// ...});return `${fixNumberparseInt// 数字格式化的逻辑 // ... } function parseTime(t) {
使用油猴脚本进行数据采集
愿一生与码相伴
01-11 1811
油猴脚本进行网页数据采集
【油猴脚本】00009 案例 Tampermonkey油猴脚本， 获取其他页面中的数据，可以获取多个页面数据，jquery获取页面数据，HTML+Css+JavaScript编写
宝码香车的博客
09-21 1431
附具体代码，深入理解，彻底掌握！
油猴脚本注入js获取DY作品数据
随便写写
01-19 2396
【小红书数据采集教学(2)通过重写XMLHttpRequest的send方法来获取POST响应体数】https://www.bilibili.com/video/BV1VC4y1e7RR?2.89 09/20 RKW:/ w@S.yG 油猴脚本js注入批量下载DY视频 https://v.douyin.com/iLfWLdeo/ 复制此链接，打开Dou音搜索，直接观看视频！所以当用户作品很多时, 也需要一直滚动到全部作品请求加载完成, 触发下载。油猴脚本的执行时机: 元素还未生成。
【油猴脚本】00019 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加数据导出Excel功能。Jquery爬虫，JavaScript爬虫HTML+Css+JavaScript编写
宝码香车的博客
10-13 2370
附具体完整代码，深入理解，彻底掌握！可以一键复制，查看效果。
Tampermonkey 高级API的使用 附Demo
知无涯
10-24 6305
近期博主在GitChat上举办了一场 彻底玩转Tampermonkey的Chat 欢迎各位前来捧场. 报名地址 使用 Tampermonkey 编写高级跨网站自动化任务脚本 在Tamermokeny中编辑脚本可以很容易地控制自己的网页 处理一般性的操作外,如更换问题,图片,注入样式和脚本外 如果我们要做更多 这就需要使用Tamermokey提供的应用程序接口, 即高级AP...
油猴脚本开发总结
qiuweifan的博客
02-08 2242
Tampermonkey 油猴操作指引
Tampermonkey(油猴)脚本编写快速入门
热门推荐
蚩尤后裔-汪茂雄
01-11 5万+
是一款免费的浏览器扩展和最为流行的用户脚本管理器，相当于一个管理插件的插件，它适用于ChromeSafariOpera Next, 和Firefox。虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利，它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能， 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。，安装非常简单，与安装普通的插件无异。
【油猴脚本】00033 案例 Tampermonkey油猴脚本,爬虫, 仅用于学习,不要乱搞。网页数据获取器-进入页面缩小化显示(代码优化)。Jquery爬虫HTML+Css+JavaScript编写
宝码香车的博客
10-17 1812
附具体完整代码，深入理解，彻底掌握！可以一键复制，查看效果。
“油猴”脚本变身爬虫：Tampermonkey辅助自动化与数据采集
weixin_41943766的博客
11-10 2754
摘要：Tampermonkey（油猴）作为浏览器脚本工具，不仅可用于网页增强，还能实现轻量级数据采集与自动化操作。相比传统爬虫，油猴优势在于零环境配置、直接操作DOM元素、模拟真人操作规避反爬，且跨浏览器兼容。通过基础脚本配置、DOM元素提取、自动化分页采集等核心功能，配合随机延时等进阶技巧，可实现高效数据采集。但需注意仅限合法用途，避免大规模采集。油猴脚本特别适合新手快速上手小批量数据采集、动态页面提取等场景，是轻量级自动化任务的理想选择。（149字）
GM_函数完全指南：解锁Tampermonkey高级功能的25个API
gitblog_00858的博客
12-19 730
Tampermonkey作为全球最受欢迎的用户脚本管理器，拥有超过1000万用户，其强大的GM_函数API系统是用户脚本开发的核心。GM_函数提供了跨浏览器兼容的高级功能，让开发者能够轻松实现数据存储、网络请求、页面操作等复杂任务。 ## 🎯 什么是GM_函数？ GM_函数是Tampermonkey提供的一组特殊API，专门用于增强用户脚本的功能。这些函数涵盖了从简单的数据存储到复杂的网络请
油猴脚本进阶：用XPath自动抓取微博热搜的3种高阶玩法（含防封技巧）
最新发布
weixin_29021291的博客
02-21 332
本文深入探讨了使用油猴脚本结合XPath技术，实现微博热搜数据自动化、长期监控的三种高阶玩法。内容涵盖从静态提取升级到动态监控的架构设计，包括定时抓取、深度数据关联提取以及历史数据对比可视化，并重点分享了模拟人类行为、优雅降级等关键防封技巧，旨在帮助用户构建稳定、高效的社交媒体数据监测工具。
油猴脚本学习摘录
qq_37338627的博客
05-14 6434
文章目录序门头的代码操作html操作css 序 资料来源： 如何编写油猴脚本 油猴插件编写学习 看小说，网页的模式最多能调节为‘夜间模式’的黑底灰字，我希望用黑底白字。 油猴给了新的选择。 门头的代码 // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @ver...
CopyExecl网页表格复制器（油猴插件脚本）
浪速之星的博客
12-03 3748
【代码】CopyExecl网页表格复制器（油猴插件脚本）
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宝码香车

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值