原生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企服之家，中国第一个企服评测及商务社交产业平台。