【油猴脚本】00018 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。继续优化UI界面，Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写

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

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

【油猴脚本】00018 案例 Tampermonkey油猴脚本， 仅用于学习，不要乱搞。继续优化UI界面，Jquery爬虫，JavaScript爬虫，HTML+Css+JavaScript编写 解决：1.点击input元素外的文字时，input元素不能聚焦，2.解决bootstrap3.3.4里panel面板中是form-group时，最后一个去掉底部间距，3.按钮风格统一

使用的库：

Bootstrap的Css库CDN:

https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css

Jquery库CDN：

 https://code.jquery.com/jquery-1.9.1.min.js

Jquery的库easyuijs CDN：

https://www.jeasyui.com/easyui/jquery.easyui.min.js

📚一、解决的效果

1.面板底部距离太宽

2. 点击文字不能聚焦

， 3.按钮颜色统一化

📚二、核心解析

💡1.面板底部距离太宽：

添加css

 .form-group:last-child{
   
   margin-bottom:0;}

💡2. 点击文字不能聚焦：

1.第一种方法：文字元素需要在<label></label>元素内，且label的for的值要和input元素的id值一致
2.第二种方法：文字元素和input元素要同时被<label></label>元素包裹

 <span class="input-group-addon"><label  style="margin-bottom:0;" for="startPageIdx1">开始页</label></span>
                        <input type="text" id="startPageIdx1" name="startPageIdx1" class="form-control input-line" placeholder="基础url地址">

💡3.按钮颜色统一化：

.btn-primary {
   
   
    color: #fff;
    background-color:  #E95C8A;
    border-color:  #E95C8A;
   }
   .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
   
   
    color: #fff;
    background-color: #c7275b;
    border-color: #c7275b;
   }

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

✍️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=100010000
// @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  class="panel panel-default">
         <div class="panel-heading">
            操作区
         </div>
         <div class="panel-body">
            <button id="draggableArea" class="draggableBtn btn btn-default">拖拽这里移动位置</button>
            <button id="editCols" class="btn btn-default">编辑表格</button>
            <button id="run" class="btn btn-default">获取当前页数据</button>
            <button id="getDataRange" class="btn btn-default">获取更多页数据</button>
         </div>
      </div>
      <div  class="panel panel-default">
         <div class="panel-heading">
                配置多页参数区
         </div>
         <div class="panel-body">
           <form id="dataRangeForm" class="form-horizontal">
             <div class="form-group clearfix">
                 <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon"><label  style="margin-bottom:0;" for="startPageIdx1">开始页</label></span>
                        <input type="text" id="startPageIdx1" name="startPageIdx1" class="form-control input-line" placeholder="基础url地址">
                    </div>
                </div>
                <div class="col-xs-3">
                    <input type="number" name="startPageIdx2" class="form-control input-line"  placeholder="页码数字参数">
                </div>
                <div class="col-xs-3">
                    <input type="text" name="startPageIdx3" class="form-control input-line"  value="/" placeholder="若无值，默认是/">
                </div>
             </div>  
             <div class="form-group clearfix">
                 <div class="col-xs-6">
                    <div class="input-group">
                        <span class="input-group-addon"><label  style="margin-bottom:0;" for="endPageIdx1">结束页</label></span>
                        <input type="text" name="endPageIdx1" class="form-control input-line" id="endPageIdx1" placeholder="基础url地址">
                    </div>
                 </div>
                 <div class="col-xs-3">
                    <input type="number" name="endPageIdx2" class="form-control input-line" placeholder="页码数字参数">
                 </div>
                 <div class="col-xs-3">
                    <input type="text" name="endPageIdx3" class="form-control input-line" value="/" placeholder="若无值，默认是/">
                 </div>
             </div> 
           </form>                            
         </div>
      </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>
      </div>
    </div>
    `
  let cssMore = `