当前位置：首页 > article >正文

【油猴脚本】00005案例 Tampermonkey油猴脚本动态渲染表格列，列的值，“默认无值”

article 2024/9/21 22:10:41

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

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

【油猴脚本】00005案例 Tampermonkey油猴脚本动态渲染表格列
📚一、效果
📚二、核心解析
- 💡1.定义动态表格初始化函数：
- 💡2.把动态渲染的表格内容，添加到页面中的table位置：
📚三、完整源代码，可以直接复制使用
- ✍️JavaScript
📚四、使用此代码

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

【油猴脚本】00005案例 Tampermonkey油猴脚本动态渲染表格列

📚一、效果

动态渲染的列

📚二、核心解析

💡1.定义动态表格初始化函数：

定义一个动态渲染的表格初始化函数：initCols(),这个函数通过字符串拼接后，形成一个新的table内部html,包含thead,tr,td和tbody,tr,td

 // 初始化列
  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
  }

💡2.把动态渲染的表格内容，添加到页面中的table位置：

把动态渲染的表格内容，添加到页面中的table位置

 //定义表格列
  let tableColsArr = ['姓名','省份','城市','性别','职业','年龄']
  let initColHtml = initCols(tableColsArr)
  // 把动态渲染的表格内容，添加到页面中的table位置
  $('#test_table').html(initColHtml);

📚三、完整源代码，可以直接复制使用

✍️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="table-responsive">
      <table class="table table-bordered table-striped" id="test_table">
      </table>
     </div>
    </div>
    `
  let cssMore = `
  #draggableArea{padding:10px;background:#f5f5f5;}
   .table-card{
    position:fixed;
    left:100px;
    top:150px;
    z-index:100;
    background:#fff;
    box-shadow: 0px 0px 0 10px #E95C8A;
   }
  `
  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);

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