网站建设预算模板,西安做推广优化的公司,网站一定要备案才能设计,湘西州建设银行网站前言#xff1a;哈喽#xff0c;大家好#xff0c;今天给大家分享一篇文章#xff01;并提供具体代码帮助大家深入理解#xff0c;彻底掌握#xff01;创作不易#xff0c;如果能帮助到大家或者给大家一些灵感和启发#xff0c;欢迎收藏关注哦 #x1f495; 目录 【油… 前言哈喽大家好今天给大家分享一篇文章并提供具体代码帮助大家深入理解彻底掌握创作不易如果能帮助到大家或者给大家一些灵感和启发欢迎收藏关注哦 目录 【油猴脚本】00006 案例 Tampermonkey油猴脚本自定义表格列名称自定义表格表头自定义表格的thead里的td一、效果二、核心解析1.添加按钮编辑表格-列2.添加弹出框 三、完整源代码可以直接复制使用✍️JavaScript 四、使用此代码 ️✍️️️️⚠️⬇️·正文开始⬇️·✅❓ 1️⃣2️⃣3️⃣
【油猴脚本】00006 案例 Tampermonkey油猴脚本自定义表格列名称自定义表格表头自定义表格的thead里的td
一、效果 原表格 二、核心解析
1.添加按钮编辑表格-列 添加 按钮的html代码 div classtoolsAreaspan ideditCols classeditCols编辑表格-列/span/div添加 按钮的css代码 .toolsArea{padding:10px;background:#f5f5f5;}2.添加弹出框 弹出框的主体html //弹出框编辑表格-列let editTableCols div classmodal ideditTableColsModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh4 classmodal-title idmyModalLabel编辑表格-列/h4button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentrue classcolseBtntimes;/span/button/divform classmodal-body/formdiv classmodal-footerbutton typebutton classbtn btn-default colseBtn data-dismissmodal关闭/buttonbutton typebutton idbtn_submit classbtn btn-primary data-dismissmodal保存/button/div/div/div/div呈现的效果 弹出框的内容html //动态渲染多列函数const colsMoreRender (strArrOpt){let str for(const x of strArrOpt){str colsRender(x)}return str;}//渲染多列let colsMoreStr colsMoreRender(tableColsArr)$(#editTableColsModal .modal-body).html(colsMoreStr)呈现的效果 读取数据并添加弹出框的事件 // 点击-编辑列按钮$(#editCols).click(function(){$(#editTableColsModal).show() //打开弹出窗口})// 点击-关闭按钮$(.colseBtn).click(function(){$(#editTableColsModal).hide() //关闭弹出窗口})// 点击-保存按钮$(#btn_submit).click(function(){let editData $(#txt_name).val(); //获取编辑的数据$(#editTableColsModal).hide() //关闭弹出窗口let renderColHtml initCols(getFormData())//渲染到页面上$(#test_table).html(renderColHtml);}) 三、完整源代码可以直接复制使用
✍️JavaScript
// UserScript
// name 动态渲染表格-实现页面动态添加删除表格列
// namespace http://tampermonkey.net/
// version 2024-09-12
// description 动态渲染表格
// author CSDN宝码香车
// match https://developer.mozilla.org/zh-CN/
// 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 classcol-md-8 table-card stylepadding:1em;div iddraggableArea拖拽这里移动表格/divdiv classtoolsAreaspan ideditCols classeditCols编辑表格-列/span/divdiv classtable-responsivetable classtable table-bordered table-striped idtest_table/table/div/divlet cssMore #draggableArea,.toolsArea{padding:10px;background:#f5f5f5;}.table-card{position:fixed;left:100px;top:150px;z-index:100;background:#fff;box-shadow: 0px 0px 0 10px #E95C8A;}.editCols{padding: 2px 5px;background:#f5f5f5;}.modal-body{height:300px;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 theadtrfor (const x of strArr) {addTableHtml td${x}/td;}addTableHtml /tr/thead;addTableHtml tbodytrfor (const y of strArr) {addTableHtml td默认无值/td;}addTableHtml /tr/tbodyreturn addTableHtml}//定义表格列let tableColsArr [姓名,省份,城市,性别,职业,年龄]let initColHtml initCols(tableColsArr)// 把动态渲染的表格内容添加到页面中的table位置$(#test_table).html(initColHtml);//弹出框编辑表格-列let editTableCols div classmodal ideditTableColsModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerh4 classmodal-title idmyModalLabel编辑表格-列/h4button typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentrue classcolseBtntimes;/span/button/divform classmodal-body/formdiv classmodal-footerbutton typebutton classbtn btn-default colseBtn data-dismissmodal关闭/buttonbutton typebutton idbtn_submit classbtn btn-primary data-dismissmodal保存/button/div/div/div/div//动态渲染列const colsRender (optionStr){let str div classform-groupdiv classitemspan列名称:/spaninput typetext classform-control value${optionStr} /div/divreturn str;}//动态渲染多列函数const colsMoreRender (strArrOpt){let str for(const x of strArrOpt){str colsRender(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 $(eleItm).val();strArr.push(formName)})return strArr;}// 点击-编辑列按钮$(#editCols).click(function(){$(#editTableColsModal).show() //打开弹出窗口})// 点击-关闭按钮$(.colseBtn).click(function(){$(#editTableColsModal).hide() //关闭弹出窗口})// 点击-保存按钮$(#btn_submit).click(function(){let editData $(#txt_name).val(); //获取编辑的数据$(#editTableColsModal).hide() //关闭弹出窗口let renderColHtml initCols(getFormData())//渲染到页面上$(#test_table).html(renderColHtml);})// 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()操作
