前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕
目录
- [【油猴脚本】00010 案例 Tampermonkey油猴脚本，动态渲染表格-添加提示信息框,HTML+Css+JavaScript编写](#【油猴脚本】00010 案例 Tampermonkey油猴脚本，动态渲染表格-添加提示信息框,HTML+Css+JavaScript编写)
- 使用的库：
-
- Bootstrap的Css库CDN:
- Jquery库CDN：
- [Jquery的库easyuijs CDN：](#Jquery的库easyuijs CDN：)
- 📚一、效果
- 📚二、核心解析
- 📚三、完整源代码，可以直接复制使用
- 📚四、使用此代码的方法：
📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣
【油猴脚本】00010 案例 Tampermonkey油猴脚本，动态渲染表格-添加提示信息框,HTML+Css+JavaScript编写
使用的库：
Bootstrap的Css库CDN:
javascript
https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.cssJquery库CDN：
javascript
https://code.jquery.com/jquery-1.9.1.min.jsJquery的库easyuijs CDN：
javascript
https://www.jeasyui.com/easyui/jquery.easyui.min.js📚一、效果
📚二、核心解析
💡1.html：
javascript
<div class="msgWrap col-md-8">
<div class="msgContent">
<div class="loadMsg">添加提示1•••</div>
<div class="loadMsg">添加提示1•••</div>
</div>
</div>💡2.css：
css
.msgWrap{
padding:10px;
margin-top:10px;
}
.msgContent{
max-height:300px;
}
.msgContent{
background:#000;
}
.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)}}💡3.JavaScript：
javascript
//提示信息框
function msg(msgStr){
let msgHtml = ` <div class="loadMsg">${msgStr}•••</div>`
$('.msgWrap .msgContent').append(msgHtml)
}
msg('111')📚三、完整源代码，可以直接复制使用
✍️JavaScript
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?query=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88&city=101120900&areaBusiness=371329&page=1
// @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 class="msgWrap col-md-8">
<div class="msgContent">
<div class="loadMsg">添加提示1•••</div>
<div class="loadMsg">添加提示1•••</div>
</div>
</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;
}
.msgWrap{
padding:10px;
margin-top:10px;
}
.msgContent{
max-height:300px;
}
.msgContent{
background:#000;
}
.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)}}
`
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">×</span></button>
</div>
<form class="modal-body">
</form>
<div class="modal-footer">
<button type="button" id="btn_addCol" class="btn btn-primary" style="float: left" data-dismiss="modal">添加一列</button>
<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><span class="delCol" style="margin-left: 20px;cursor:pointer;">删除此列</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);
})
//表格-删除列事件函数
$(".modal-body").on('click','.delCol',function(){
console.log($(this).parents('.form-group'))
if($('.form-group').length === 1){
alert('至少保留一个列')
return false;
}
$(this).parents('.form-group').remove();
})
//添加一列的点击事件
$('#btn_addCol').on('click',function(){
$('.modal-body').append(colsRender('新列请重新命名'))
})
//提示信息框
function msg(msgStr){
let msgHtml = ` <div class="loadMsg">${msgStr}•••</div>`
$('.msgWrap .msgContent').append(msgHtml)
}
msg('111')
// 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
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。
更多专栏订阅推荐：
💕 vue
✈️ Electron
⭐️ js
📝 字符串