原生HTML集合

一、表格

1、固定表格

<div class="tablebox"><div class="table-container"><table id="myTable" border="0" cellspacing="0" cellpadding="0"><thead><tr></tr></thead><tbody></tbody></table><imgid="noDataImage"src="./img/zanwu.svg"style="display: none; margin: 20px auto 0"/></div></div>

      let fixedArr = [{ name: 'ID', width: 50, val: 'baojia_id' },{ name: '客户名称', width: 110, val: 'customer_name' },{ name: '创建时间', width: 110, val: 'created_at' },{ name: '状态', width: 110, val: 'status_text' },{ name: '产品种类', width: 110, val: 'category_name' },{ name: '报价公式', width: 110, val: 'formula_name' },{ name: '产品', width: 110, val: 'product_name' },{ name: '报价单名称', width: 110, val: 'baojia_name' },{ name: '报价日期', width: 110, val: 'quote_date' },{ name: '备注', width: 150, val: 'remark' },]let sessionArr = []// 表格头部固定部分function table() {let htmlth = ''sessionArr = fixedArrfixedArr.forEach((obj, index) => {htmlth +="<th class='tablebox_th1 fixed' width=" +obj.width +'>' +obj.name +'</th>'})tabletr.innerHTML = htmlth}table()//获取数据
function kehu(val) {let datas = valif (val) {$.ajax({type: 'GET',url: '接口地址',data: datas,datatype: 'json',timeout: 50000, //超时时间设置，单位毫秒success: function (data) {if (data.success === true) {tableData = []if (data.data.length === 0) {tabletr.innerHTML = ''table()tabletbody.innerHTML = ''document.getElementById('noDataImage').style.display = 'block'} else {tabletr.innerHTML = ''table()tabletbody.innerHTML = ''document.getElementById('noDataImage').style.display = 'none'tableData = data.datavar htmlStr = ''// 内容tableData.forEach((obj, index) => {htmlStr += '<tr class="active">'sessionArr.forEach((ele) => {if (ele.val === 'baojia_id') {return (htmlStr +="<td class='box1 fixed'> <div>" +obj.baojia_id +'</div></td>')} else if (ele.val === 'customer_name') {htmlStr +="<td class='box1 fixed'> <div>" +obj.customer_name +'</div></td>'} else if (ele.val === 'created_at') {htmlStr +="<td class='box1 fixed'> <div>" +obj.created_at +'</div></td>'} else if (ele.val === 'status_text') {htmlStr +="<td class='box1 state fixed'> <div>" +obj.status_text +'</div></td>'} else if (ele.val === 'category_name') {htmlStr +="<td class='box1 stybox fixed'> <div>" +obj.category_name +'</div></td>'} else if (ele.val === 'formula_name') {htmlStr +="<td class='box1 stybox fixed'> <div>" +obj.formula_name +'</div></td>'} else if (ele.val === 'product_name') {htmlStr +="<td class='box1 fixed'>" + obj.product_name + '</td>'} else if (ele.val === 'baojia_name') {htmlStr +="<td class='box1 fixed'>" + obj.baojia_name + '</td>'} else if (ele.val === 'quote_date') {htmlStr +="<td class='box1 fixed'>" + obj.quote_date + '</td>'} else if (ele.val === 'remark') {htmlStr +="<td class='box1 fixed'>" +(obj.remark === null ? '暂无' : obj.remark) +'</td>'}})htmlStr += '</tr>'tabletbody.innerHTML = htmlStr})//表格样式（隔行变色）sutcolor()}}},error: function (error) {console.log(error)// showErrorTips('网络错误')},})}}
kehu（val）

2、 动态表格

<div class="tablebox"><div class="table-container"><table id="myTable" border="0" cellspacing="0" cellpadding="0"><thead><tr></tr></thead><tbody></tbody></table><imgid="noDataImage"src="./img/zanwu.svg"style="display: none; margin: 20px auto 0"/></div></div>

function kehu(val) {let datas = valif (val) {$.ajax({type: 'GET',url: 'http://39.99.247.200/admin/api/get-quotes/',data: datas,datatype: 'json',timeout: 50000, //超时时间设置，单位毫秒success: function (data) {if (data.success === true) {tableData = []if (data.data.length === 0) {tabletr.innerHTML = ''table()tabletbody.innerHTML = ''document.getElementById('noDataImage').style.display = 'block'} else {tabletr.innerHTML = ''table()tabletbody.innerHTML = ''document.getElementById('noDataImage').style.display = 'none'tableData = data.datavar htmlStr = ''// 动态表头let newArr = []newArr = JSON.parse(readDataFromLocal('tabledynamics'))sessiondynamics = []newArr.forEach((el) => {Object.keys(tableData[0].element_data).forEach((key) => {if (key === el) {sessiondynamics.push(key)const tableth = document.createElement('th')tableth.textContent = keytableth.classList.add('tablebox_th2')tableth.width = 120tabletr.appendChild(tableth)}})})tablethead.appendChild(tabletr)const tr = document.createElement('tr')// 内容tableData.forEach((obj, index) => {htmlStr += '<tr class="active">'sessiondynamics.forEach((obje) => {Object.keys(obj.element_data).forEach((key) => {if (obje === key) {htmlStr +="<td class='box2'>" +obj.element_data[key] +'</td>'}})})htmlStr += '</tr>'tabletbody.innerHTML = htmlStr})sutcolor()}}},error: function (error) {console.log(error)// showErrorTips('网络错误')},})}}
kehu(val)

3、表格的样式

隔行变色

// 创建隔行换色函数function sutcolor() {// 获取当前tbody内tr的数量，表示为有多少行let trs = tabletbody.children// 循环行数{for (let i = 0; i < trs.length; i++) {// 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{if (i % 2 == 1) {// 循环行数{for (let j = 0; j < trs[i].children.length; j++) {if (trs[i].children[j].className.includes('box1') ||trs[i].children[j].className.includes('box3')) {trs[i].children[j].style.backgroundColor = '#dee9ff'} else {trs[i].children[j].style.backgroundColor = '#f4f7ff'}}} else {// 循环行数{for (let j = 0; j < trs[i].children.length; j++) {if (trs[i].children[j].className.includes('box1') ||trs[i].children[j].className.includes('box3')) {// 给奇数这一行的颜色设置trs[i].children[j].style.backgroundColor = '#f4f7ff'} else {trs[i].children[j].style.backgroundColor = '#fff'}}}}}

固定前几列

// 固定前面几列function stickyTableColumns() {const table = document.querySelector('table') // 获取表格元素const tbody = table.querySelector('tbody') // 获取tbody元素const rows = tbody.querySelectorAll('tr') // 获取所有行const ths = table.querySelector('thead tr') // 获取所有表头const thCount = table.querySelector('thead tr').childElementCount // 获取表头列数//浏览器的宽度是否小于1200px,小于就不固定前几项if (window.innerWidth < 1200) {// 遍历所有的单元格，为除了前6列的列添加position: sticky样式rows.forEach((row) => {const cells = row.querySelectorAll('td')let width = 0// 循环行数{for (let j = 0; j < cells.length; j++) {cells[j].classList.remove('fixed')cells[j].classList.remove('box-shadow1')}})const thcells = ths.querySelectorAll('th')thcells[thcells.length - 1].classList.remove('box-shadow1')} else {// 遍历所有的单元格，为除了前6列的列添加position: sticky样式rows.forEach((row) => {const cells = row.querySelectorAll('td')let width = 0// 循环行数{for (let j = 0; j < cells.length; j++) {if (cells[j].className.includes('box1')) {if (j === 0) {cells[j].style.left = 0 + 'px'} else {width = width + cells[j - 1].offsetWidthcells[j].style.left = width + 'px'}}// if (cells[j].className.includes('box3')) {//   if (j === cells.length - 1) {//     cells[j].style.right = 0 + 'px'//   }// }}})// 遍历表头所有的单元格const thcells = ths.querySelectorAll('th')let thwidth = 0// 循环行数for (let j = 0; j < thcells.length; j++) {if (thcells[j].className.includes('tablebox_th1')) {// thcells[j].classList.add('new-class')// document.querySelector('fixed0')// thcells[j].style.position = 'sticky'if (j === 0) {thcells[j].style.left = 0 + 'px'} else {thwidth = thwidth + thcells[j - 1].offsetWidththcells[j].style.left = thwidth + 'px'}}// if (thcells[j].className.includes('tablebox_th3')) {//   if (j === thcells.length - 1) {//     thcells[j].style.right = 0 + 'px'//   }// }}}}

表格高度自适应

// 表格的高度自适应function tableheight() {//浏览器的宽度是否小于1200px,表格的高度if (window.innerWidth < 1200) {// tablebox.style.height = 'auto'tablebox.style.minHeight = '100'} else {// let gao = Number(tablebox.offsetTop) + 65let gao = Number(tablebox.offsetTop) + 35tablebox.style.height = 'calc(100vh - ' + gao + 'px)'}}tableheight()

二、下拉框

1、 select2（可搜索）

 

  <head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> --><title></title><linkhref="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><link href="./js/bootstrap.min.css" rel="stylesheet" /><script src="js/bootstrap.min.js"></script><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script></head>

               <div style="margin-right: 15px"><label style="width: 80px">产品种类<span style="color: red; font-size: 16px">*</span></label><selectid="category_id"class="selectpicker"style="width: 200px"></select></div>

<script type="text/javascript">//下拉框$(function () {// 下拉框分类var categoriesval = $('#category_id').select2({allowClear: true,placeholder: '选择',})var optionVal = nullcategoriesval.val(optionVal).trigger('change')//初始化数据categoriesval.change()})//下拉框监听清除操作。$('#category_id').on('select2:clear', function () {。。。。})//下拉框分类的选择后的操作$('#category_id').on('change', function () {if ($('#category_id').val()) {。。。。}})
</script>

获取下拉框的数据

// 获取分类名称function categories() {let categoryId = document.querySelector('#category_id')$.ajax({type: 'GET',url: '接口地址',datatype: 'json',timeout: 50000, //超时时间设置，单位毫秒success: function (data) {if (data.success === true) {let objData = data.datalet id = nullvar htmlStr = ''Object.keys(objData).forEach((key, index) => {if (index === 0) {document.querySelector('#category_id').value = keyid = key}htmlStr +='<option value=' + key + '>' + objData[key] + '</option>'})categoryId.innerHTML = htmlStr}},error: function (error) {console.log(error)},})}

2、下拉框之间联动

<div style="margin-right: 15px"><label style="width: 80px">产品种类<span style="color: red; font-size: 16px">*</span></label><selectid="category_id"class="selectpicker"style="width: 200px"></select></div><div style="margin-right: 10px"><label style="width: 80px">报价公式<span style="color: red; font-size: 16px">*</span></label><selectid="formula_id"class="selectpicker"style="width: 200px"></select></div>

//下拉框$(function () {// 下拉框分类var categoriesval = $('#category_id').select2({allowClear: true,placeholder: '选择',})var optionVal = nullcategoriesval.val(optionVal).trigger('change')categoriesval.change()// 下拉框关联公式var formulasval = $('#formula_id').select2({allowClear: true,placeholder: '选择',})formulasval.val(optionVal).trigger('change')formulasval.change()      })//下拉框分类监听清除操作。$('#category_id').on('select2:clear', function () {$('#formula_id').empty()})//下拉框分类的选择后，其余下拉框接口重新调用$('#category_id').on('change', function () {if ($('#category_id').val()) {formulas(Number($('#category_id').val()))}})