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

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

---

📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋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 = `
  

      

          

              

                
编辑表格-列
                ×
              
              

              
              

                  关闭
                  保存
              
          
      
  
  `

呈现的效果

弹出框的内容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 = `
    

     
拖拽这里移动表格
      

       编辑表格-列
      
     

      
     
    
    `
  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 = ``
    for (const x of strArr) {
      addTableHtml += `${x}`;
    }
    addTableHtml += ``;
    addTableHtml += ''
    for (const y of strArr) {
      addTableHtml += `默认无值`;
    }
    addTableHtml += ``
    return addTableHtml
  }
  //定义表格列
  let tableColsArr = ['姓名','省份','城市','性别','职业','年龄']
  let initColHtml = initCols(tableColsArr)
  // 把动态渲染的表格内容，添加到页面中的table位置
  $('#test_table').html(initColHtml);

  //弹出框，编辑表格-列
  let editTableCols = `
  

      

          

              

                
编辑表格-列
                ×
              
              

              
              

                  关闭
                  保存
              
          
      
  
  `
  //动态渲染列
  const colsRender = (optionStr)=>{
    let str = `
    

       

         列名称:${optionStr}"> 
      
    
    `
    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

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

---

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作