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

---

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

【油猴脚本】00013 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。添加UI交互实现自定义，更多页抓取数据(1)，JavaScript爬虫，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：

引入bootstrap.css库，并命名一个别名 bootstrapCss

     <form class="form-horizontal">
        <div class="form-group">
           <label for="startPageIdx" class="col-sm-2 control-label">开始页</label>
           <input type="text"  id="startPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
        <div class="form-group">
           <label for="endPageIdx" class="col-sm-2 control-label">结束页</label>
           <input type="text"  id="endPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
      </form>

💡2.全部样式代码：

  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="dataRange">
      <form class="form-horizontal">
        <div class="form-group">
           <label for="startPageIdx" class="col-sm-2 control-label">开始页</label>
           <input type="text"  id="startPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
        <div class="form-group">
           <label for="endPageIdx" class="col-sm-2 control-label">结束页</label>
           <input type="text"  id="endPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
      </form>
      
      </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>
    `

---

📚三、完整源代码，需填写url参数使用

✍️JavaScript

// ==UserScript==
// @name         动态渲染表格-添加UI交互实现自定义，更多页抓取数据
// @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=100010000
// @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="dataRange">
      <form class="form-horizontal">
        <div class="form-group">
           <label for="startPageIdx" class="col-sm-2 control-label">开始页</label>
           <input type="text"  id="startPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
        <div class="form-group">
           <label for="endPageIdx" class="col-sm-2 control-label">结束页</label>
           <input type="text"  id="endPageIdx" class=""  placeholder="基础url地址">
           <input type="text"  class=""  placeholder="url参数">
           <input type="text"  class=""  placeholder="url参数">
        </div>
      </form>
      
      </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 thead,
   tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    }
   .table-card tbody{display:block;height:200px; overflow:auto; -webkit-overflow-scrolling: touch; }
   .table-card tbody::-webkit-scrollbar {
     display: none; // 隐藏滚动条
   }
  `
  let bsCss = GM_getResourceText('bootstrapCss')
  let i = 2   //开始页数
  let endi = 4 //结束页数，实际获取的是1-4页的数据，第一页本身就存在，指定2-4页即可
  let isOrderNumber = true //是否显示序号
  GM_addStyle(bsCss)
  GM_addStyle(cssMore)
  $('body').append(tableHtml)

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

  // 初始化列
  const initCols = (strArr)=>{
    let addTableHtml = ''
    if(isOrderNumber){  //显示序号
      addTableHtml = `<thead><tr><td>序号</td>`
    }else{
      addTableHtml = `<thead><tr>`
    }
    for (const x of strArr) {
      addTableHtml += `<td>${x}</td>`;
    }
    addTableHtml += `</tr></thead>`;

    if(isOrderNumber){  //显示序号
      addTableHtml += `<tbody><tr><td>1</td>`
    }else{
      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(){
    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(){
    run()
  })

  let strHtml = '<div id="testHtml"></div>'
  let cssStyle = `
    #testHtml{
      width:100px;
      background:blue;
    }
  `
  GM_addStyle(cssStyle)
  $('body').append(strHtml)

  function getHtml(num){
    msg(`正在获取第${num}页`)
    $.ajax({
      url: "根据需求替换这个地址"+num,
      timeout: 30000,
      success: function(html){
        $('#testHtml').append(html)
        msg(`第${num}页加载完成`)
        if(num === endi){ //最后一次执行完后获取数据
          getData()
        }
      },
      error:function(er){
        console.log('er ',er)
      },
      complete:function(co){
        console.log('co ',co)
      }
    });
  }


  function run(){
    msg('开始获取')
    setInterval(function(){
      if(i>endi){
        return false;
      }
      getHtml(i)  //获取页面的html及数据
      i++
    },10000)
  }

  //获取数据的选择器
  function getData(){
    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 = ''
      if(isOrderNumber){
        tds = `<td>${i+1}</td>`
      }
      for(let i2 = 0;i2<fieldNum;i2++){
        tds += `<td>${eleTotalColArr[i2][i]}</td>`
      }

      trs += `<tr>${tds}</tr>`
    }
    //把数据放入表格
    $('.table-card tbody').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()）操作