【油猴脚本】00006 案例 Tampermonkey油猴脚本自定义表格列名称，自定义表格表头，自定义表格的thead里的td

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

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

【油猴脚本】00006 案例 Tampermonkey油猴脚本自定义表格列名称，自定义表格表头，自定义表格的thead里的td
📚一、效果
📚二、核心解析
- 💡1.添加按钮"编辑表格-列"：
- 💡2.添加弹出框：
📚三、完整源代码，可以直接复制使用
- ✍️JavaScript
📚四、使用此代码

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

【油猴脚本】00006 案例 Tampermonkey油猴脚本自定义表格列名称，自定义表格表头，自定义表格的thead里的td

📚一、效果

原表格

编辑表格列描述

📚二、核心解析

💡1.添加按钮"编辑表格-列"：

添加按钮的html代码

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

添加按钮的css代码

.toolsArea{padding:10px;background:#f5f5f5;}

💡2.添加弹出框：

弹出框的主体html

  //弹出框，编辑表格-列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" 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>`

呈现的效果

弹出框的内容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 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="table-responsive"><table class="table table-bordered table-striped" id="test_table"></table></div></div>`let 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 = `<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 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" 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)=>{let str = `<div class="form-group"><div class="item"><span>列名称:</span><input type="text"  class="form-control"  value="${optionStr}"> </div></div>`return 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