原生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.mzph.cn/bicheng/69066.shtml

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

相关文章

CVE-2025-0411 7-zip 漏洞复现

CVE-2025-0411 7-zip 漏洞复现

文章目录 免责申明漏洞描述影响版本漏洞poc漏洞复现修复建议 免责申明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 漏洞描述 此漏洞 &#xff08;CVSS SCORE 7.0&#xff09; 允许远程攻击者绕…
阅读更多...
[操作系统] 深入进程地址空间

[操作系统] 深入进程地址空间

程序地址空间回顾 在C语言学习的时&#xff0c;对程序的函数、变量、代码等数据的存储有一个大致的轮廓。在语言层面上存储的地方叫做程序地址空间&#xff0c;不同类型的数据有着不同的存储地址。 下图为程序地址空间的存储分布和和特性&#xff1a; 使用以下代码来验证一下…
阅读更多...
ChirpIoT技术的优势以及局限性

ChirpIoT技术的优势以及局限性

ChirpIoT是一种由上海磐启微电子开发的国产无线射频通讯技术&#xff0c;ChirpIoT技术基于磐启多年对雷达等线性扩频信号的深入研究&#xff0c;并在此基础上对线性扩频信号的变化进行了改进&#xff0c;实现了远距离传输的一种无线通信技术。相关产品型号有E29-400T22D、E290-…
阅读更多...
【线上问题定位处理】及【性能优化】系列文章

【线上问题定位处理】及【性能优化】系列文章

目录 性能优化 性能优化 九大服务架构性能优化方式 如何进行GC调优 如何排查线上系统出现的Full GC MySQL - 性能优化 MySQL - 分库分表 大数据查询的处理方案 MySQL优化手段有哪些 服务CPU100%问题如何快速定位？ 服务内存OOM问题如何快速定位？ JVM调优6大步骤 线…
阅读更多...
IGBT的损耗计算的学习【2025/1/24】

IGBT的损耗计算的学习【2025/1/24】

可以通过示波器实测IGBT电压电流波形&#xff0c;然后通过示波器的math功能将电压电流波形乘积后积分求损耗。 软开管&#xff1a;给了导通信号&#xff0c;但是电流并没有从此IGBT流过 IGBT&#xff08;绝缘栅双极晶体管&#xff09;的损耗主要分为 导通损耗 和 开关损耗 两部…
阅读更多...
Jmeter使用Request URL请求接口

Jmeter使用Request URL请求接口

简介 在Jmeter调试接口时&#xff0c;有时不清楚后端服务接口的具体路径&#xff0c;可以使用Request URL和cookie来实现接口请求。以下内容以使用cookie鉴权的接口举例。 步骤 ① 登录网站后获取具体的Request URL和cookie信息 通过浏览器获取到Request URL和cookie&#…
阅读更多...
联想电脑怎么设置u盘启动_联想电脑设置u盘启动方法(支持新旧机型)

联想电脑怎么设置u盘启动_联想电脑设置u盘启动方法(支持新旧机型)

有很多网友问联想电脑怎么设置u盘启动&#xff0c;联想电脑设置u盘启动的方法有两种&#xff0c;一是通过bios进行设置。二是通过快捷方式启动进入u盘启动。但需要注意有两种引导模式是&#xff0c;一种是uefi引导&#xff0c;一种是传统的leacy引导&#xff0c;所以需要注意制…
阅读更多...
【github 使用相关】提交pr和commit message Conventional Commits 规范 代码提交的描述该写什么？

【github 使用相关】提交pr和commit message Conventional Commits 规范 代码提交的描述该写什么？

目录 Git 提交信息格式格式描述Subject&#xff08;标题&#xff09;Body&#xff08;正文&#xff09; 规范的标签&#xff08;Tag&#xff09;示例 CG Git 提交信息格式 格式描述 一般开源项目代码库根目录都会有一个 CONTRIBUTING.md 或者其他类似名字的文档来介绍如何开始…
阅读更多...
142.WEB渗透测试-信息收集-小程序、app（13）

142.WEB渗透测试-信息收集-小程序、app（13）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;141.WEB渗透测试-信息收集-小程序、app&#xff08;12&#xff09; 软件用法&#xff0c…
阅读更多...
电路研究9.2——合宙Air780EP使用AT指令

电路研究9.2——合宙Air780EP使用AT指令

这里正式研究AT指令的学习了&#xff0c;之前只是接触的AT指令&#xff0c;这里则是深入分析AT指令了。 软件的开发方式&#xff1a; AT&#xff1a;MCU 做主控&#xff0c;MCU 发 AT 命令给模组的开发方式&#xff0c;模组仅提供标准的 AT 固件&#xff0c; 所有的业务控制逻辑…
阅读更多...
亚博microros小车-原生ubuntu支持系列：1 键盘控制

亚博microros小车-原生ubuntu支持系列：1 键盘控制

背景&#xff1a;电脑配置不太行&#xff0c;我在ubuntu再运行vmware&#xff0c;里面运行亚博官方的虚拟机镜像ubuntu&#xff0c;系统很卡。基本上8G内存给打满了。还是想把亚博官方的代码迁移出来&#xff0c;之前售后就说除了官方镜像虚拟机&#xff0c;需要自己摸索迁移。…
阅读更多...
Linux中关于glibc包编译升级导致服务器死机或者linux命令无法使用的情况

Linux中关于glibc包编译升级导致服务器死机或者linux命令无法使用的情况

服务器上编译glibc2.29版本导致命令不能用 Inconsistency detected by ld.so: dl-call-libc-early-init.c: 37: _dl_call_libc_early_init: Assertion sym ! NULL failed!下面是造成不可用的原因 1.编译完gcc 2.29版本后&#xff0c;开始做映射&#xff0c;以达到能使用最新版…
阅读更多...
C语言进程与线程编程实战：IPC机制与线程同步详解

C语言进程与线程编程实战：IPC机制与线程同步详解

系列文章目录 01-C语言从零到精通&#xff1a;常用运算符完全指南&#xff0c;掌握算术、逻辑与关系运算 02-C语言控制结构全解析&#xff1a;轻松掌握条件语句与循环语句 03-C语言函数参数传递深入解析&#xff1a;传值与传地址的区别与应用实例 04-C语言数组与字符串操作全解…
阅读更多...
ubuntu k8s 1.31

ubuntu k8s 1.31

ubuntu 系统 设置 更新源 apt-get upgradeapt upgradeapt update apt-get update释放root sudo passwd root密码su - 密码设置root可以登录 cd /etc/ssh/sshd_config.d && vi ssh.confPermitRootLogin yes PasswordAuthentication yes:wq 保存退出 systemctl resta…
阅读更多...
FPGA 21 ，深入理解 Verilog 中的基数，以及二进制数与十进制数之间的关系（ Verilog中的基数 ）

FPGA 21 ，深入理解 Verilog 中的基数，以及二进制数与十进制数之间的关系（ Verilog中的基数 ）

目录 前言 一. 基数基础 1.1 基数介绍
阅读更多...
第4章 神经网络【1】——损失函数

第4章 神经网络【1】——损失函数

4.1.从数据中学习 实际的神经网络中&#xff0c;参数的数量成千上万&#xff0c;因此&#xff0c;需要由数据自动决定权重参数的值。 4.1.1.数据驱动 数据是机器学习的核心。 我们的目标是要提取出特征量&#xff0c;特征量指的是从输入数据/图像中提取出的本质的数 …
阅读更多...
如何获取小程序的code在uniapp开发中

如何获取小程序的code在uniapp开发中

如何获取小程序的code在uniapp开发中&#xff0c;也就是本地环境&#xff0c;微信开发者工具中获取code&#xff0c;这里的操作是页面一进入就获取code登录&#xff0c;没有登录页面的交互&#xff0c;所以写在了APP.vue中&#xff0c;也就是小程序一打开就获取用户的code APP.…
阅读更多...
Blazor-选择循环语句

Blazor-选择循环语句

今天我们来说说Blazor选择语句和循环语句。 下面我们以一个简单的例子来讲解相关的语法&#xff0c;我已经创建好了一个Student类&#xff0c;以此类来进行语法的运用 因为我们需要交互性所以我们将类创建在*.client目录下 if 我们做一个学生信息的显示&#xff0c;Gender为…
阅读更多...
科家多功能美发梳：科技赋能，重塑秀发新生

科家多功能美发梳：科技赋能，重塑秀发新生

在繁忙的都市生活中,头皮健康与秀发养护成为了现代人不可忽视的日常课题。近日,科家电动按摩梳以其卓越的性能和创新设计,赢得了广大消费者的青睐。这款集科技与美学于一身的美发梳,不仅搭载了2亿负离子、6000次/分钟的声波振动等前沿技术,更融入了650nm聚能环红光与415nm强劲蓝…
阅读更多...
代码随想录day3

代码随想录day3

203:移除链表元素&#xff1a;注意虚拟头节点的使用 ListNode* removeElements(ListNode* head, int val) {ListNode* result new ListNode();result->next head;ListNode* current result;while(current ! nullptr && current->next ! nullptr){if(current-…
阅读更多...
最新文章

Copyright @ 2022~2023