原生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()))}})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/6901.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【知识】可视化理解git中的cherry-pick、merge、rebase

【知识】可视化理解git中的cherry-pick、merge、rebase

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 这三个确实非常像&#xff0c;以至于对于初学者来说比较难理解。 总结对比 先给出对比&#xff1a; 特性git mergegit rebasegit cherry-pick功能合并…
阅读更多...
SpringBoot开发（三）SpringBoot介绍、项目创建、运行

SpringBoot开发（三）SpringBoot介绍、项目创建、运行

1. SpringBoot 1.1. SpringBoot介绍 Spring Boot给世界程序员带来了春天&#xff0c;越来越多的企业选择使用spring boot来开发他们的软件&#xff0c;因此学习spring boot是科技发展的必然趋势。本门课程将从web最基础的知识点开始讲起&#xff0c;逐步带你攻破spring boot的…
阅读更多...
438. 找到字符串中所有字母异位词

438. 找到字符串中所有字母异位词

【题目】&#xff1a;438. 找到字符串中所有字母异位词 class Solution { public:vector<int> findAnagrams(string s, string p) {vector<int> res;vector<int> curVec(26, 0); // 统计p中字母出现的次数for(char c : p) {curVec[c - a];}for(int l 0, r …
阅读更多...
Leetcode-两数之和

Leetcode-两数之和

1.暴力枚举 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {int lennums.size();int i,j;for(i0;i<len;i){for(ji1;j<len;j){if(nums[i]nums[j]target){return{i,j};}}}return {i,j};} }; 新知识&#xff1a; return {…
阅读更多...
边缘网关具备哪些功能？

边缘网关具备哪些功能？

边缘网关&#xff0c;又称边缘计算网关&#xff0c;部署在网络边缘&#xff0c;它位于物联网设备与云计算平台之间&#xff0c;充当着数据流动的“守门员”和“处理器”。通过其强大的数据处理能力和多样化的通信协议支持&#xff0c;边缘网关能够实时分析、过滤和存储来自终端…
阅读更多...
高等数学学习笔记 ☞ 微分方程

高等数学学习笔记 ☞ 微分方程

1. 微分方程的基本概念 1. 微分方程的基本概念&#xff1a; &#xff08;1&#xff09;微分方程&#xff1a;含有未知函数及其导数或微分的方程。 举例说明微分方程&#xff1a;&#xff1b;。 &#xff08;2&#xff09;微分方程的阶&#xff1a;指微分方程中未知函数的导数…
阅读更多...
【优选算法】9----长度最小的子数组

【优选算法】9----长度最小的子数组

----------------------------------------begin-------------------------------------- 铁子们&#xff0c;前面的双指针算法篇就算告一段落啦~ 接下来是我们的滑动窗口篇&#xff0c;不过有一说一&#xff0c;算法题就跟数学题一样&#xff0c;只要掌握方法&#xff0c;多做…
阅读更多...
计算机网络之链路层

计算机网络之链路层

本文章目录结构出自于《王道计算机考研 计算机网络_哔哩哔哩_bilibili》 02 数据链路层 在网上看到其他人做了详细的笔记&#xff0c;就不再多余写了&#xff0c;直接参考着学习吧。 1 详解数据链路层-数据链路层的功能【王道计算机网络笔记】_wx63088f6683f8f的技术博客_51C…
阅读更多...
Kubernetes v1.28.0安装dashboard v2.6.1（k8s图形化操作界面）

Kubernetes v1.28.0安装dashboard v2.6.1（k8s图形化操作界面）

准备工作 Kubernetes v1.28.0搭建教程请参考&#xff1a;Kubernetes v1.28.0集群快速搭建教程-CSDN博客 查看当前集群nodes都是ready状态 查看当前pods都是running状态 下载并修改配置文件 下载 recommended.yaml &#xff0c;下载好之后&#xff0c;进入文件编辑 下载地址…
阅读更多...
Spring 框架：配置缓存管理器、注解参数与过期时间

Spring 框架：配置缓存管理器、注解参数与过期时间

在 Spring 框架中&#xff0c;可通过多种方式配置缓存具体行为&#xff0c;常见配置方法如下。 1. 缓存管理器&#xff08;CacheManager&#xff09;配置 基于内存的缓存管理器配置&#xff08;以SimpleCacheManager为例&#xff09; SimpleCacheManager 是 Spring 提供的简单…
阅读更多...
2025.1.21——六、BUU XSS COURSE 1 XSS漏洞|XSS平台搭建

2025.1.21——六、BUU XSS COURSE 1 XSS漏洞|XSS平台搭建

题目来源&#xff1a;buuctf BUU XSS COURSE 1 目录 一、打开靶机&#xff0c;整理信息 二、解题思路 step 1&#xff1a;输入框尝试一下 step 2&#xff1a;开始xss注入 step 3&#xff1a;搭建平台 step 4&#xff1a;利用管理员cookie访问地址 三、小结 二编&#…
阅读更多...
基于Python机器学习的双色球数据分析与预测

基于Python机器学习的双色球数据分析与预测

python统计分析2003-2024年所有的中奖记录,通过人工智能机器学习预测双色球,个人意见,仅供参考. 声明&#xff1a;双色球具有随机性&#xff0c;任何工具无法预测。本文章仅作为技术交流&#xff0c;提供学习参考。本文所涉及的代码均为python之机器学习的代码。双色球为公益事…
阅读更多...
警企联动齐发力、共筑反诈“防护墙”

警企联动齐发力、共筑反诈“防护墙”

2025年1月10日是第五个中国人民警察节,南通移动联合南通公安反诈中心,深入社区商圈,开展防范电信网络诈骗宣传活动,进一步增强广大人民群众的反诈意识和能力,全力守护好群众的“钱袋子”。 当日,活动现场一大早就呈现出一片忙碌景象,工作人员支起摊位,将各类精心制作的反诈宣传…
阅读更多...
mysql 学习3 SQL语句--整体概述。SQL通用语法；DDL创建数据库，查看当前数据库是那个，删除数据库，使用数据库；查看当前数据库有哪些表

mysql 学习3 SQL语句--整体概述。SQL通用语法；DDL创建数据库，查看当前数据库是那个，删除数据库，使用数据库；查看当前数据库有哪些表

SQL通用语法 SQL语句分类 DDL data definition language : 用来创建数据库&#xff0c;创建表&#xff0c;创建表中的字段&#xff0c;创建索引。因此成为 数据定义语言 DML data manipulation language 有了数据库和表以及字段后&#xff0c;那么我们就需要给这个表中 添加数…
阅读更多...
九、CSS工程化方案

九、CSS工程化方案

一、PostCSS介绍 二、PostCSS插件的使用 项目安装 - npm install postcss-cli 全局安装 - npm install postcss-cli -g postcss-cli地址&#xff1a;GitHub - postcss/postcss-cli: CLI for postcss postcss地址&#xff1a;GitHub - postcss/postcss: Transforming styles…
阅读更多...
Baklib助力企业如何搭建内容中台的全新策略解析

Baklib助力企业如何搭建内容中台的全新策略解析

内容概要 在当今快速变化的商业环境中&#xff0c;企业面临着数据爆炸和信息管理的巨大挑战。内容中台作为一种新兴的管理理念&#xff0c;专注于内容的集中管理与高效利用&#xff0c;旨在帮助企业优化信息流动&#xff0c;提高工作效率。通过构建一个灵活、可扩展的内容中台…
阅读更多...
AR智慧点巡检系统探究和技术方案设计

AR智慧点巡检系统探究和技术方案设计

一、项目背景 随着工业生产规模的不断扩大和设备复杂度的提升&#xff0c;传统的人工点巡检方式效率低下、易出错&#xff0c;难以满足现代化企业对设备运行可靠性和安全性的要求。AR&#xff08;增强现实&#xff09;技术的发展为点巡检工作带来了新的解决方案&#xff0c;通…
阅读更多...
LabVIEW项目中的工控机与普通电脑选择

LabVIEW项目中的工控机与普通电脑选择

工控机&#xff08;Industrial PC&#xff09;与普通电脑在硬件设计、性能要求、稳定性、环境适应性等方面存在显著差异。了解这些区别对于在LabVIEW项目中选择合适的硬件至关重要。下面将详细分析这两种设备的主要差异&#xff0c;并为LabVIEW项目中的选择提供指导。 ​ 硬件设…
阅读更多...
计算机图形学：实验四 带纹理的OBJ文件读取和显示

计算机图形学：实验四 带纹理的OBJ文件读取和显示

一、程序功能设计 在程序中读取带纹理的obj文件&#xff0c;载入相应的纹理图片文件&#xff0c;将带纹理的模型显示在程序窗口中。实现带纹理的OBJ文件读取与显示功能&#xff0c;具体设计如下&#xff1a; OBJ文件解析与数据存储 通过实现TriMesh类中的readObj函数&#x…
阅读更多...
C# OpenCV机器视觉:红外体温检测

C# OpenCV机器视觉:红外体温检测

在一个骄阳似火的夏日&#xff0c;全球却被一场突如其来的疫情阴霾笼罩。阿强所在的小镇&#xff0c;平日里熙熙攘攘的街道变得冷冷清清&#xff0c;人们戴着口罩&#xff0c;行色匆匆&#xff0c;眼神中满是对病毒的恐惧。阿强作为镇上小有名气的科技达人&#xff0c;看着这一…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023