前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 ??#### 目录* 【油猴脚本】00020 案例 Tampermonkey油猴脚本 仅用于学习不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫JavaScript爬虫HTMLCssJavaScript编写* 使用的库* * Bootstrap的Css库CDN: * Jquery库CDN * sheetjs库CDN * Jquery的库JqueryUi CDN* ??一、效果* ??二、核心解析* * ??1.jqueryui库的引入 * ??2.jqueryui的Draggable组件的bug发现以及解决 * ??3.添加 - 不可移动到窗口外的功能* ??三、完整源代码可以直接复制使用* * ??JavaScript* ??四、使用此代码的方法* *???·正文开始·??? ??0123456789???*#【油猴脚本】00020 案例 Tampermonkey油猴脚本 仅用于学习不要乱搞。添加不可移动到窗口外的功能。把easyui库更换为JqueryUi库JqueryUi学习性更好。jqueryui的Draggable组件的bug发现以及解决,Jquery爬虫JavaScript爬虫HTMLCssJavaScript编写-----------------------------------------------------------------------------------------------------------------------------------------------------------------------使用的库-----### 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 ### sheetjs库CDN https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js ### Jquery的库JqueryUi CDN https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js ??一、效果------ 添加-不可移动到窗口外的功能* *??二、核心解析--------### ??1.jqueryui库的引入 // require https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js ### ??2.jqueryui的Draggable组件的bug发现以及解决 原拖拽的handle控件是button,而jqueryui中button不能被当做拖拽组件的handle因此改变button为div拖拽这里移动位置 添加拖拽的handle的css鼠标样式 #draggableArea{ cursor:move; } ### ??3.添加 - 不可移动到窗口外的功能 添加draggable的参数containment为window $(‘.table-card’).draggable({ handle: ‘#draggableArea’, containment:“window” }) * * *??三、完整源代码可以直接复制使用------------------### 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?city100010000 // 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://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.3/jquery-ui.min.js // require https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js // grant GM_addStyle // grant GM_getResourceText // run-at document-end ///UserScript(function () { ‘use strict’; let tableHtml div classcol-md-8 table-card stylepadding:1em; div classpanel panel-default div classpanel-heading 操作区 /div div classpanel-body div iddraggableArea classdraggableBtn btn btn-default拖拽这里移动位置/div button ideditCols classbtn btn-default编辑表格/button button idrun classbtn btn-default获取当前页数据/button button idgetDataRange classbtn btn-default获取更多页数据/button button idoutExcel classbtn btn-default导出Excel/button /div /div div classpanel panel-default div classpanel-heading 配置多页参数区 /div div classpanel-body form iddataRangeForm classform-horizontal div classform-group clearfix div classcol-xs-6 div classinput-group span classinput-group-addonlabel stylemargin-bottom:0; forstartPageIdx1开始页/label/span input typetext idstartPageIdx1 namestartPageIdx1 classform-control input-line placeholder基础url地址 /div /div div classcol-xs-3 input typenumber namestartPageIdx2 classform-control input-line placeholder页码数字参数 /div div classcol-xs-3 input typetext namestartPageIdx3 classform-control input-line value/ placeholder若无值默认是/ /div /div div classform-group clearfix div classcol-xs-6 div classinput-group span classinput-group-addonlabel stylemargin-bottom:0; forendPageIdx1结束页/label/span input typetext nameendPageIdx1 classform-control input-line idendPageIdx1 placeholder基础url地址 /div /div div classcol-xs-3 input typenumber nameendPageIdx2 classform-control input-line placeholder页码数字参数 /div div classcol-xs-3 input typetext nameendPageIdx3 classform-control input-line value/ placeholder若无值默认是/ /div /div /form /div /div div classtable-responsive table classtable table-bordered table-striped idtest_table /table /div div classmsgWrap col-md-8 div classmsgContent /div /div /divlet cssMore #draggableArea{ cursor:move; } .table-card{ position:fixed; left:100px; top:150px; z-index:100; background:#fff; box-shadow: 0px 0px 0 10px #E95C8A; } .modal-body{ max-height:500px; overflow-y: scroll; } .msgWrap{ padding:10px; margin-top:10px; } .msgContent{ background:#000; max-height:100px; overflow-y:scroll; } .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; // 隐藏滚动条 } .form-group:last-child{margin-bottom:0;} .btn-primary { color: #fff; background-color: #E95C8A; border-color: #E95C8A; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #fff; background-color: #c7275b; border-color: #c7275b; }let bsCss GM_getResourceText(‘bootstrapCss’) let startPageNum 2 //开始页数 let endPageNum 4 //结束页数实际获取的是1-4页的数据第一页本身就存在指定2-4页即可 let isOrderNumber true //是否显示序号 GM_addStyle(bsCss) GM_addStyle(cssMore) $(‘body’).append(tableHtml)KaTeX parse error: Expected }, got # at position 45: … handle: #̲draggableArea,…{x}; } addTableHtml ; if(isOrderNumber){ //显示序号 addTableHtml 1}else{ addTableHtml tbodytr } for (const y of strArr) { addTableHtml 默认无值; } addTableHtml return addTableHtml } //定义表格列 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 ×编辑表格-列添加一列 关闭 保存//动态渲染列 const colsRender (optionStr,dataOptionStr,idxOption){ if(!dataOptionStr){ dataOptionStr 无参数请填写参数参数是css选择器 } let str 第i d x O p t i o n 列 / d i v / d i v d i v c l a s s c o l − x s − 6 b u t t o n c l a s s d e l C o l b t n b t n − d e f a u l t b t n − x s p u l l − r i g h t 删除此列 / b u t t o n / d i v / d i v / d i v d i v c l a s s p a n e l − b o d y d i v c l a s s f o r m − g r o u p d i v c l a s s i n p u t − g r o u p d i v c l a s s i n p u t − g r o u p − a d d o n l a b e l s t y l e m a r g i n − b o t t o m : 0 ; f o r c o l N a m e {idxOption}列 /div /div div classcol-xs-6 button classdelCol btn btn-default btn-xs pull-right删除此列/button /div /div /div div classpanel-body div classform-group div classinput-group div classinput-group-addon label stylemargin-bottom:0; forcolNameidxOption列/div/divdivclasscol−xs−6buttonclassdelColbtnbtn−defaultbtn−xspull−right删除此列/button/div/div/divdivclasspanel−bodydivclassform−groupdivclassinput−groupdivclassinput−group−addonlabelstylemargin−bottom:0;forcolName{idxOption}列的名称:数据位置:return str; } //动态渲染多列函数 const colsMoreRender (strArrOpt){ let str for(const x in strArrOpt){ if(cssSelectorArr.length0){ let idxNum parseInt(x)1 str colsRender(strArrOpt[x],cssSelectorArr[x],idxNum) }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%20){ 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($(#editTableColsModal .panel).length 1){ alert(至少保留一个列) return false; } $(this).parents(.panel).remove(); }) //添加一列的点击事件 $(#btn_addCol).on(click,function(){ let panelLength $(#editTableColsModal .panel).length; let currentPanelNum panelLength 1; $(.modal-body).append(colsRender(新列请重新命名,null,currentPanelNum)) }) //点击 - 运行按钮 $(#run).click(function(){ getData() }) //点击-获取数据 let dataRange {} $(#getDataRange).click(function(){ $(#dataRangeForm input).each(function(idx,item){ dataRange[item.name] item.value.replace(/s/g, ) }) let startPageIdx dataRange.startPageIdx1 dataRange.startPageIdx2 dataRange.startPageIdx3 let endPageIdx dataRange.endPageIdx1 dataRange.endPageIdx2 dataRange.endPageIdx3 startPageNum parseInt(dataRange.startPageIdx2) endPageNum parseInt(dataRange.endPageIdx2) run() }) // 点击-导出Excel $(#outExcel).click(function(){ let obj { htmlElementTable: #test_table, excelSaveName: 获取的数据 } htmlTableToExcel(obj) }) let strHtml div idtestHtml/div let cssStyle #testHtml{ width:100px; background:blue; }GM_addStyle(cssStyle) $(body).append(strHtml) function getHtml(num){ msg(正在获取第${num}页) let requestUrl dataRange.startPageIdx1 num dataRange.startPageIdx3 $.ajax({ url: requestUrl, timeout: 30000, success: function(html){ $(#testHtml).append(html) msg(第${num}页加载完成) if(num endPageNum){ //最后一次执行完后获取数据 getData() } }, error:function(er){ console.log(er ,er) }, complete:function(co){ console.log(co ,co) } }); } function run(){ msg(开始获取) setInterval(function(){ if(startPageNumendPageNum){ return false; } getHtml(startPageNum) //获取页面的html及数据 startPageNum },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 i0;itotalLIneNum;i){ let tds if(isOrderNumber){ tds KaTeX parse error: Expected EOF, got } at position 22: …/td }̲ for(l…{eleTotalColArr[i2][i]}} trs ${tds}} //把数据放入表格 $(.table-card tbody).html(trs); msg(全部数据获取完成,共计获取KaTeX parse error: Expected EOF, got } at position 24: …neNum}条) }̲ //提示信…{msgStr}???let $msgContent $(.msgWrap .msgContent); $msgContent.append(msgHtml).scrollTop($msgContent.prop(scrollHeight)) } function htmlTableToExcel(objOptions){ if(!objOptions){ alert(请填写函数调用参数) return false; } let opt objOptions; // opt.htmlElementTable 需要转化的htmlTable // opt.excelSaveName 导出的表格名称 // 1、寻找表格元素 let html_table document.querySelector(o p t . h t m l E l e m e n t T a b l e ‘ ) / / 2 、创建新的工作簿 c o n s t w b X L S X . u t i l s . b o o k n e w ( ) / / 3 、将表格元素转 s h e e t 表格 c o n s t w o r k s h e e t X L S X . u t i l s . t a b l e t o s h e e t ( h t m l t a b l e ) / / 4 、将 s h e e t 表添加到工作簿 X L S X . u t i l s . b o o k a p p e n d s h e e t ( w b , w o r k s h e e t , S h e e t 1 ) ; / / 5 、保存工作簿 X L S X . w r i t e F i l e ( w b , ‘ {opt.htmlElementTable}) // 2、创建新的工作簿 const wb XLSX.utils.book_new() // 3、将表格元素转sheet表格 const worksheet XLSX.utils.table_to_sheet(html_table) // 4、将sheet表添加到工作簿 XLSX.utils.book_append_sheet(wb, worksheet, Sheet1); // 5、保存工作簿 XLSX.writeFile(wb, opt.htmlElementTable‘)//2、创建新的工作簿constwbXLSX.utils.bookn​ew()//3、将表格元素转sheet表格constworksheetXLSX.utils.tablet​os​heet(htmlt​able)//4、将sheet表添加到工作簿XLSX.utils.booka​ppends​heet(wb,worksheet,Sheet1);//5、保存工作簿XLSX.writeFile(wb,‘{opt.excelSaveName}.xlsx) } // 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 到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章创作不易如果能帮助到大家,希望大家多多支持~??若转载本文一定注明本文链接。* * 更多专栏订阅推荐 ?? htmlcssjs 绚丽效果 ?? vue Electron js ?? 字符串 时间对象Date()操作