IT评测·应用市场-qidao123.com

标题: 原生HTML集合 [打印本页]
作者: 万有斥力    时间: 2025-1-24 04:14
标题: 原生HTML集合
一、表格

1、固定表格

  1. <div class="tablebox">
  2.             <div class="table-container">
  3.               <table id="myTable" border="0" cellspacing="0" cellpadding="0">
  4.                 <thead>
  5.                   <tr></tr>
  6.                 </thead>
  7.                 <tbody></tbody>
  8.               </table>
  9.               <img
  10.                 id="noDataImage"
  11.                 src="./img/zanwu.svg"
  12.                 style="display: none; margin: 20px auto 0"
  13.               />
  14.             </div>
  15.           </div>
复制代码
  1.       let fixedArr = [
  2.         { name: 'ID', width: 50, val: 'baojia_id' },
  3.         { name: '客户名称', width: 110, val: 'customer_name' },
  4.         { name: '创建时间', width: 110, val: 'created_at' },
  5.         { name: '状态', width: 110, val: 'status_text' },
  6.         { name: '产品种类', width: 110, val: 'category_name' },
  7.         { name: '报价公式', width: 110, val: 'formula_name' },
  8.         { name: '产品', width: 110, val: 'product_name' },
  9.         { name: '报价单名称', width: 110, val: 'baojia_name' },
  10.         { name: '报价日期', width: 110, val: 'quote_date' },
  11.         { name: '备注', width: 150, val: 'remark' },
  12.       ]
  13.       let sessionArr = []
  15.       // 表格头部固定部分
  16.       function table() {
  17.           let htmlth = ''
  18.           sessionArr = fixedArr
  19.           fixedArr.forEach((obj, index) => {
  20.             htmlth +=
  21.               "<th class='tablebox_th1 fixed' width=" +
  22.               obj.width +
  23.               '>' +
  24.               obj.name +
  25.               '</th>'
  26.           })
  27.           tabletr.innerHTML = htmlth
  28.       }
  29.       table()
  31.      //获取数据
  32. function kehu(val) {
  33.         let datas = val
  34.         if (val) {
  35.           $.ajax({
  36.             type: 'GET',
  37.             url: '接口地址',
  38.             data: datas,
  39.             datatype: 'json',
  40.             timeout: 50000, //超时时间设置，单位毫秒
  41.             success: function (data) {
  42.               if (data.success === true) {
  43.                 tableData = []
  44.                 if (data.data.length === 0) {
  45.                   tabletr.innerHTML = ''
  46.                   table()
  47.                   tabletbody.innerHTML = ''
  48.                   document.getElementById('noDataImage').style.display = 'block'
  49.                 } else {
  50.                   tabletr.innerHTML = ''
  51.                   table()
  52.                   tabletbody.innerHTML = ''
  53.                   document.getElementById('noDataImage').style.display = 'none'
  54.                   tableData = data.data
  55.                   var htmlStr = ''
  57.                   // 内容
  58.                   tableData.forEach((obj, index) => {
  59.                     htmlStr += '<tr class="active">'
  60.                     sessionArr.forEach((ele) => {
  61.                       if (ele.val === 'baojia_id') {
  62.                         return (htmlStr +=
  63.                           "<td class='box1 fixed'> <div>" +
  64.                           obj.baojia_id +
  65.                           '</div></td>')
  66.                       } else if (ele.val === 'customer_name') {
  67.                         htmlStr +=
  68.                           "<td class='box1 fixed'> <div>" +
  69.                           obj.customer_name +
  70.                           '</div></td>'
  71.                       } else if (ele.val === 'created_at') {
  72.                         htmlStr +=
  73.                           "<td class='box1 fixed'> <div>" +
  74.                           obj.created_at +
  75.                           '</div></td>'
  76.                       } else if (ele.val === 'status_text') {
  77.                         htmlStr +=
  78.                           "<td class='box1 state fixed'> <div>" +
  79.                           obj.status_text +
  80.                           '</div></td>'
  81.                       } else if (ele.val === 'category_name') {
  82.                         htmlStr +=
  83.                           "<td class='box1 stybox fixed'> <div>" +
  84.                           obj.category_name +
  85.                           '</div></td>'
  86.                       } else if (ele.val === 'formula_name') {
  87.                         htmlStr +=
  88.                           "<td class='box1 stybox fixed'> <div>" +
  89.                           obj.formula_name +
  90.                           '</div></td>'
  91.                       } else if (ele.val === 'product_name') {
  92.                         htmlStr +=
  93.                           "<td class='box1 fixed'>" + obj.product_name + '</td>'
  94.                       } else if (ele.val === 'baojia_name') {
  95.                         htmlStr +=
  96.                           "<td class='box1 fixed'>" + obj.baojia_name + '</td>'
  97.                       } else if (ele.val === 'quote_date') {
  98.                         htmlStr +=
  99.                           "<td class='box1 fixed'>" + obj.quote_date + '</td>'
  100.                       } else if (ele.val === 'remark') {
  101.                         htmlStr +=
  102.                           "<td class='box1 fixed'>" +
  103.                           (obj.remark === null ? '暂无' : obj.remark) +
  104.                           '</td>'
  105.                       }
  106.                     })
  107.                     htmlStr += '</tr>'
  108.                     tabletbody.innerHTML = htmlStr
  109.                   })
  110.                   //表格样式（隔行变色）
  111.                   sutcolor()
  112.                 }
  113.               }
  114.             },
  115.             error: function (error) {
  116.               console.log(error)
  117.               // showErrorTips('网络错误')
  118.             },
  119.           })
  120.         }
  121.       }
  122. kehu（val）
复制代码
2、 动态表格

  1. <div class="tablebox">
  2.             <div class="table-container">
  3.               <table id="myTable" border="0" cellspacing="0" cellpadding="0">
  4.                 <thead>
  5.                   <tr></tr>
  6.                 </thead>
  7.                 <tbody></tbody>
  8.               </table>
  9.               <img
  10.                 id="noDataImage"
  11.                 src="./img/zanwu.svg"
  12.                 style="display: none; margin: 20px auto 0"
  13.               />
  14.             </div>
  15.           </div>
复制代码
  1. function kehu(val) {
  2.         let datas = val
  3.         if (val) {
  4.           $.ajax({
  5.             type: 'GET',
  6.             url: 'http://39.99.247.200/admin/api/get-quotes/',
  7.             data: datas,
  8.             datatype: 'json',
  9.             timeout: 50000, //超时时间设置，单位毫秒
  10.             success: function (data) {
  11.               if (data.success === true) {
  12.                 tableData = []
  13.                 if (data.data.length === 0) {
  14.                   tabletr.innerHTML = ''
  15.                   table()
  16.                   tabletbody.innerHTML = ''
  17.                   document.getElementById('noDataImage').style.display = 'block'
  18.                 } else {
  19.                   tabletr.innerHTML = ''
  20.                   table()
  21.                   tabletbody.innerHTML = ''
  22.                   document.getElementById('noDataImage').style.display = 'none'
  23.                   tableData = data.data
  24.                   var htmlStr = ''
  25.                   // 动态表头
  26.                   let newArr = []
  27.                   newArr = JSON.parse(readDataFromLocal('tabledynamics'))
  28.                   sessiondynamics = []
  29.                   newArr.forEach((el) => {
  30.                     Object.keys(tableData[0].element_data).forEach((key) => {
  31.                       if (key === el) {
  32.                         sessiondynamics.push(key)
  33.                         const tableth = document.createElement('th')
  34.                         tableth.textContent = key
  35.                         tableth.classList.add('tablebox_th2')
  36.                         tableth.width = 120
  37.                         tabletr.appendChild(tableth)
  38.                       }
  39.                     })
  40.                   })
  41.                   tablethead.appendChild(tabletr)
  42.                   const tr = document.createElement('tr')
  44.                   // 内容
  45.                   tableData.forEach((obj, index) => {
  46.                     htmlStr += '<tr class="active">'
  47.                     sessiondynamics.forEach((obje) => {
  48.                       Object.keys(obj.element_data).forEach((key) => {
  49.                         if (obje === key) {
  50.                           htmlStr +=
  51.                             "<td class='box2'>" +
  52.                             obj.element_data[key] +
  53.                             '</td>'
  54.                         }
  55.                       })
  56.                     })
  57.                     htmlStr += '</tr>'
  58.                     tabletbody.innerHTML = htmlStr
  59.                   })
  61.                   sutcolor()
  62.                 }
  63.               }
  64.             },
  65.             error: function (error) {
  66.               console.log(error)
  67.               // showErrorTips('网络错误')
  68.             },
  69.           })
  70.         }
  71.       }
  72. kehu(val)
复制代码

3、表格的样式

隔行变色

  1. // 创建隔行换色函数
  2.       function sutcolor() {
  3.         // 获取当前tbody内tr的数量，表示为有多少行
  4.         let trs = tabletbody.children
  6.         // 循环行数{
  7.         for (let i = 0; i < trs.length; i++) {
  8.           // 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{
  9.           if (i % 2 == 1) {
  10.             // 循环行数{
  11.             for (let j = 0; j < trs[i].children.length; j++) {
  12.               if (
  13.                 trs[i].children[j].className.includes('box1') ||
  14.                 trs[i].children[j].className.includes('box3')
  15.               ) {
  16.                 trs[i].children[j].style.backgroundColor = '#dee9ff'
  17.               } else {
  18.                 trs[i].children[j].style.backgroundColor = '#f4f7ff'
  19.               }
  20.             }
  21.           } else {
  22.             // 循环行数{
  23.             for (let j = 0; j < trs[i].children.length; j++) {
  24.               if (
  25.                 trs[i].children[j].className.includes('box1') ||
  26.                 trs[i].children[j].className.includes('box3')
  27.               ) {
  28.                 // 给奇数这一行的颜色设置
  29.                 trs[i].children[j].style.backgroundColor = '#f4f7ff'
  30.               } else {
  31.                 trs[i].children[j].style.backgroundColor = '#fff'
  32.               }
  33.             }
  34.           }
  35.         }
  36.       }
复制代码
固定前几列

  1. // 固定前面几列
  2.       function stickyTableColumns() {
  3.         const table = document.querySelector('table') // 获取表格元素
  4.         const tbody = table.querySelector('tbody') // 获取tbody元素
  5.         const rows = tbody.querySelectorAll('tr') // 获取所有行
  6.         const ths = table.querySelector('thead tr') // 获取所有表头
  7.         const thCount = table.querySelector('thead tr').childElementCount // 获取表头列数
  8.         //浏览器的宽度是否小于1200px,小于就不固定前几项
  9.         if (window.innerWidth < 1200) {
  10.           // 遍历所有的单元格，为除了前6列的列添加position: sticky样式
  11.           rows.forEach((row) => {
  12.             const cells = row.querySelectorAll('td')
  13.             let width = 0
  14.             // 循环行数{
  15.             for (let j = 0; j < cells.length; j++) {
  16.               cells[j].classList.remove('fixed')
  17.               cells[j].classList.remove('box-shadow1')
  18.             }
  19.           })
  20.           const thcells = ths.querySelectorAll('th')
  21.           thcells[thcells.length - 1].classList.remove('box-shadow1')
  22.         } else {
  23.           // 遍历所有的单元格，为除了前6列的列添加position: sticky样式
  24.           rows.forEach((row) => {
  25.             const cells = row.querySelectorAll('td')
  26.             let width = 0
  27.             // 循环行数{
  28.             for (let j = 0; j < cells.length; j++) {
  29.               if (cells[j].className.includes('box1')) {
  30.                 if (j === 0) {
  31.                   cells[j].style.left = 0 + 'px'
  32.                 } else {
  33.                   width = width + cells[j - 1].offsetWidth
  34.                   cells[j].style.left = width + 'px'
  35.                 }
  36.               }
  37.               // if (cells[j].className.includes('box3')) {
  38.               //   if (j === cells.length - 1) {
  39.               //     cells[j].style.right = 0 + 'px'
  40.               //   }
  41.               // }
  42.             }
  43.           })
  45.           // 遍历表头所有的单元格
  46.           const thcells = ths.querySelectorAll('th')
  47.           let thwidth = 0
  48.           // 循环行数
  49.           for (let j = 0; j < thcells.length; j++) {
  50.             if (thcells[j].className.includes('tablebox_th1')) {
  51.               // thcells[j].classList.add('new-class')
  52.               // document.querySelector('fixed0')
  53.               // thcells[j].style.position = 'sticky'
  54.               if (j === 0) {
  55.                 thcells[j].style.left = 0 + 'px'
  56.               } else {
  57.                 thwidth = thwidth + thcells[j - 1].offsetWidth
  58.                 thcells[j].style.left = thwidth + 'px'
  59.               }
  60.             }
  61.             // if (thcells[j].className.includes('tablebox_th3')) {
  62.             //   if (j === thcells.length - 1) {
  63.             //     thcells[j].style.right = 0 + 'px'
  64.             //   }
  65.             // }
  66.           }
  67.         }
  68.       }
复制代码
表格高度自顺应

  1. // 表格的高度自适应
  2.       function tableheight() {
  3.         //浏览器的宽度是否小于1200px,表格的高度
  4.         if (window.innerWidth < 1200) {
  5.           // tablebox.style.height = 'auto'
  6.           tablebox.style.minHeight = '100'
  7.         } else {
  8.           // let gao = Number(tablebox.offsetTop) + 65
  9.           let gao = Number(tablebox.offsetTop) + 35
  10.           tablebox.style.height = 'calc(100vh - ' + gao + 'px)'
  11.         }
  12.       }
  13.       tableheight()
复制代码

二、下拉框

1、 select2（可搜索）

 
  1.   <head>
  2.     <meta charset="utf-8" />
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  4.     <meta
  5.       name="viewport"
  6.       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
  7.     />
  8.     <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
  9.     <title></title>
  11.     <link
  12.       href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
  13.       rel="stylesheet"
  14.     />
  15.     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  16.     <link href="./js/bootstrap.min.css" rel="stylesheet" />
  17.     <script src="js/bootstrap.min.js"></script>
  19.     <link
  20.       rel="stylesheet"
  21.       href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
  22.     />
  23.     <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  24.   </head>
复制代码
  1.                <div style="margin-right: 15px">
  2.                   <label style="width: 80px"
  3.                     >产品种类
  4.                     <span style="color: red; font-size: 16px">*</span>
  5.                   </label>
  6.                   <select
  7.                     id="category_id"
  8.                     class="selectpicker"
  9.                     style="width: 200px"
  10.                   ></select>
  11.                 </div>
复制代码
  1. <script type="text/javascript">
  2.       //下拉框
  3.       $(function () {
  4.         // 下拉框分类
  5.         var categoriesval = $('#category_id').select2({
  6.           allowClear: true,
  7.           placeholder: '选择',
  8.         })
  9.         var optionVal = null
  10.         categoriesval.val(optionVal).trigger('change')//初始化数据
  11.         categoriesval.change()
  12.       })
  13.       //下拉框监听清除操作。
  14.       $('#category_id').on('select2:clear', function () {
  15.         。。。。
  16.       })
  17.       //下拉框分类的选择后的操作
  18.       $('#category_id').on('change', function () {
  19.         if ($('#category_id').val()) {
  20.           。。。。
  21.         }
  22.       })
  23. </script>
复制代码
获取下拉框的数据
  1. // 获取分类名称
  2.       function categories() {
  3.         let categoryId = document.querySelector('#category_id')
  5.         $.ajax({
  6.           type: 'GET',
  7.           url: '接口地址',
  8.           datatype: 'json',
  9.           timeout: 50000, //超时时间设置，单位毫秒
  10.           success: function (data) {
  11.             if (data.success === true) {
  12.               let objData = data.data
  13.               let id = null
  14.               var htmlStr = ''
  15.               Object.keys(objData).forEach((key, index) => {
  16.                 if (index === 0) {
  17.                   document.querySelector('#category_id').value = key
  18.                   id = key
  19.                 }
  20.                 htmlStr +=
  21.                   '<option value=' + key + '>' + objData[key] + '</option>'
  22.               })
  23.               categoryId.innerHTML = htmlStr
  24.             }
  25.           },
  26.           error: function (error) {
  27.             console.log(error)
  28.           },
  29.         })
  30.       }
复制代码
2、下拉框之间联动

  1. <div style="margin-right: 15px">
  2.                   <label style="width: 80px"
  3.                     >产品种类
  4.                     <span style="color: red; font-size: 16px">*</span>
  5.                   </label>
  6.                   <select
  7.                     id="category_id"
  8.                     class="selectpicker"
  9.                     style="width: 200px"
  10.                   ></select>
  11.                 </div>
  12.                 <div style="margin-right: 10px">
  13.                   <label style="width: 80px"
  14.                     >报价公式
  15.                     <span style="color: red; font-size: 16px">*</span>
  16.                   </label>
  17.                   <select
  18.                     id="formula_id"
  19.                     class="selectpicker"
  20.                     style="width: 200px"
  21.                   ></select>
  22.                 </div>
复制代码
  1. //下拉框
  2.       $(function () {
  3.         // 下拉框分类
  4.         var categoriesval = $('#category_id').select2({
  5.           allowClear: true,
  6.           placeholder: '选择',
  7.         })
  8.         var optionVal = null
  9.         categoriesval.val(optionVal).trigger('change')
  10.         categoriesval.change()
  12.         // 下拉框关联公式
  13.         var formulasval = $('#formula_id').select2({
  14.           allowClear: true,
  15.           placeholder: '选择',
  16.         })
  17.         formulasval.val(optionVal).trigger('change')
  18.         formulasval.change()      })
  19.       //下拉框分类监听清除操作。
  20.       $('#category_id').on('select2:clear', function () {
  21.         $('#formula_id').empty()
  22.       })
  23.       //下拉框分类的选择后，其余下拉框接口重新调用
  24.       $('#category_id').on('change', function () {
  25.         if ($('#category_id').val()) {
  26.           formulas(Number($('#category_id').val()))
  27.         }
  28.       })
  29.       
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4