📚三、完整源代码，需填写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;">code>

<div id="draggableArea">拖拽这里移动表格</div>code>

<div class="toolsArea">code>

<span id="editCols" class="editCols">编辑表格-列</span>code>

</div>

<div class="dataRange">code>

<form class="form-horizontal">code>

<div class="form-group">code>

<label for="startPageIdx" class="col-sm-2 control-label">开始页</label>code>

<input type="text" id="startPageIdx" class="" placeholder="基础url地址">code>

<input type="text" class="" placeholder="url参数">code>

<input type="text" class="" placeholder="url参数">code>

</div>

<div class="form-group">code>

<label for="endPageIdx" class="col-sm-2 control-label">结束页</label>code>

<input type="text" id="endPageIdx" class="" placeholder="基础url地址">code>

<input type="text" class="" placeholder="url参数">code>

<input type="text" class="" placeholder="url参数">code>

</div>

</form>

</div>

<div class="actionArea">code>

<span id="run" class="run">运行</span>code>

</div>

<div class="table-responsive">code>

<table class="table table-bordered table-striped" id="test_table">code>

</table>

</div>

<div class="msgWrap col-md-8">code>

<div class="msgContent">code>

</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">code>

<div class="modal-dialog" role="document">code>

<div class="modal-content">code>

<div class="modal-header">code>

<h4 class="modal-title" id="myModalLabel">编辑表格-列</h4>code>

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="colseBtn">&times;</span></button>code>

</div>

<form class="modal-body">code>

</form>

<div class="modal-footer">code>

<button type="button" id="btn_addCol" class="btn btn-primary" style="float: left" data-dismiss="modal">添加一列</button>code>

<button type="button" class="btn btn-default colseBtn" data-dismiss="modal">关闭</button>code>

<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal">保存</button>code>

</div>

</div>

</div>

</div>

`

//动态渲染列

const colsRender = (optionStr,dataOptionStr)=>{ -- -->

if(!dataOptionStr){

dataOptionStr = '无参数，请填写参数，参数是css选择器'

}

let str = `

<div class="form-group">code>

<div class="item">code>

<span>列名称:</span><span class="delCol" style="margin-left: 20px;cursor:pointer;">删除此列</span><input type="text" class="form-control" value="${ optionStr}"> code>

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

</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>'code>

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>`code>

$('.msgWrap .msgContent').append(msgHtml)

}

// Your code here...

})();