jquery写表格,通过后端传值,并合并单元格


<!DOCTYPE html>
<html>
<head><title>Table Using jQuery</title><style>#tableWrapper {width: 100%;height: 200px; /* 设置表格容器的高度 */overflow: auto; /* 添加滚动条 */margin-top: -10px; /* 负的外边距值,根据实际情况调整 */}#table {width: 100%;border-collapse: collapse;margin-top: 20px;background-color: rgba(0, 0, 0, 0);}#table th,#table td {border: 1px solid #ccc;padding: 8px;background-color: #f9fafb;}#table tr:nth-child(odd) {background-color: #cfdff5;}#table th {background-color: #f9fafb;position: sticky;top: 0;}#tableWrapper {height: 200px; /* 设置表格容器的高度为固定值 */overflow: auto; /* 添加滚动条 */
}
#tableWrapper {height: 200px; /* 设置表格容器的高度为固定值 */overflow: auto; /* 添加滚动条 */
}/* 设置滚动条的高度与表格容器的高度一致 */
#tableWrapper::-webkit-scrollbar {width: 10px;height: 100%; /* 设置滚动条的高度为100% */
}/* 其他滚动条样式设置 */
#tableWrapper::-webkit-scrollbar-track {background-color: #f1f1f1;
}#tableWrapper::-webkit-scrollbar-thumb {background-color: #888;
}#tableWrapper::-webkit-scrollbar-thumb:hover {background-color: #555;
}</style>
</head>
<body><div id="tableWrapper"><table id="table"><thead><tr><th>日期</th><th>姓名</th><th>地址</th></tr></thead><tbody id="tableBody"></tbody></table></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>var tableData = [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}];$(document).ready(function() {var $tableBody = $('#tableBody');$.each(tableData, function(index, item) {var $row = $('<tr>');if (index === 0) {$row.append($('<td>').attr('colspan', 2).text(item.date + ' / ' + item.name));} else {$row.append($('<td>').text(item.date));$row.append($('<td>').text(item.name));}$row.append($('<td>').text(item.address));$tableBody.append($row);});});</script>
</body>
</html>

效果如下

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

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

相关文章

NLP_神经概率语言模型(NPLM)

文章目录 NPLM的起源NPLM的实现1.构建实验语料库2.生成NPLM训练数据3.定义NPLM4.实例化NPLM5.训练NPLM6.用NPLM预测新词 NPLM小结 NPLM的起源 在NPLM之前&#xff0c;传统的语言模型主要依赖于最基本的N-Gram技术&#xff0c;通过统计词汇的共现频率来计算词汇组合的概率。然而…

【自然语言处理】微调 Fine-Tuning 各种经典方法的概念汇总

【自然语言处理】微调 Fine-Tuning 各种经典方法的概念汇总 前言请看此微调 Fine-TuningSFT 监督微调&#xff08;Supervised Fine-Tuning&#xff09;概念&#xff1a;监督学习&#xff0c;无监督学习&#xff0c;自监督学习&#xff0c;半监督学习&#xff0c;强化学习的区别…

Jetpack之RadionBtton、Switch、Checkbox组件介绍

Jetpack Compose系列(9) - RadionBtton、Switch、Checkbox组件介绍 RadioButton 跟View体系一样&#xff0c;Compose也有RadioButton单选按钮组件&#xff0c;遵从Material Design风格。 其构造函数如下&#xff1a; Composable fun RadioButton(selected: Boolean,onClick…

uniapp+uView 【详解】录音,自制音频播放器

效果预览 代码实现 <template><view class"btnListBox"><view class"audioBox" v-if"audioLength"><u-row><u-col span"2"><u--text aligncenter :text"currentTime"></u--text>…

YOLOv8改进 | 检测头篇 | 独创RFAHead检测头超分辨率重构检测头(适用Pose、分割、目标检测)

一、本文介绍 本文给大家带来的改进机制是RFAHead,该检测头为我独家全网首发,本文主要利用将空间注意力机制与卷积操作相结合的卷积RFAConv来优化检测头,其核心在于优化卷积核的工作方式,特别是在处理感受野内的空间特征时。RFAConv主要的优点就是增加模型的特征提取能力,…

arcgis各种版本下载

arcgic 下载&#xff01;&#xff01;&#xff01; ArcGIS是一款地理信息系统软件&#xff0c;由美国Esri公司开发。它提供了一系列完整的GIS功能&#xff0c;包括地图制作、空间数据管理、空间分析、空间信息整合、发布与共享等。ArcGIS是一个可扩展的GIS平台&#xff0c;提供…

恒创科技:服务器内存不足影响大吗?

​  服务器在为网站、应用程序和在线服务提供支持方面发挥着关键作用。这些服务器需要提供最佳性能&#xff0c;以确保正常无缝的用户体验&#xff0c;而RAM是显著影响服务器性能的关键配置之一。 RAM 是一种随机存取存储器&#xff0c;计算机和服务器使用它来临时存储正在使…

【AG32VF407】国产MCU+FPGA,更新官方固件解决8Mhz内部晶振不准,Verilog实测7.9Mhz!

视频讲解 [AG32VF407]国产MCUFPGA&#xff0c;更新官方固件解决8Mhz内部晶振不准&#xff0c;Verilog实测7.9Mhz&#xff01; 实验过程 之前出现的双路pll不同频率的测试中&#xff0c;提出了内部晶振输出不准的问题&#xff0c;和官方沟通后得到极大改善&#xff0c;方法如下…

探索Web API SpeechSynthesis:给你的网页增添声音

Web API SpeechSynthesis是一项强大的浏览器功能&#xff0c;它允许开发者将文本转换为语音&#xff0c;并通过浏览器播放出来。本文将深入探讨SpeechSynthesis的控制接口&#xff0c;包括其功能、用法和一个完整的JavaScript示例。 参考资料&#xff1a;SpeechSynthesis - Web…

Python程序设计 函数

简单函数 函数&#xff1a;就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 函数的使用包含两个步骤&#xff1a; 定义函数 —— 封装 独立的功能 调用函数 —— 享受 封装 的成果 函数的作用&#xff0c;在开发程序时&#xff0c;使用…

2024年第九届信号与图像处理国际会议(ICSIP 2024)

2024第九届信号与图像处理国际会议&#xff08;ICSIP 2024&#xff09;将于2024年7月12-14日在中国南京召开。ICSIP每年召开一次&#xff0c;在过去的七年中吸引了1200多名与会者&#xff0c;是展示信号和图像处理领域最新进展的领先国际会议之一。本次将汇集来自亚太国家、北美…

LeetCode:13.罗马数字转整数

13. 罗马数字转整数 - 力扣&#xff08;LeetCode&#xff09; 目录 思路&#xff1a; 官解代码&#xff1a; 作者辣眼代码: 每日表情包&#xff1a; 思路&#xff1a; 思路已经很明了了&#xff0c;题目已经给出一般规则和特殊规则&#xff08;而且题目确保给定的是正确的…

活动图(Activity Diagram)

一、定义 动态图。显示人或对象的活动&#xff0c;其方式类似于流程图 二、构成 包含有&#xff1a; 初始节点(开始)最后一个节点(结束)活动转换判定(决策),同步条分岔或汇合泳道 1、 初始节点(开始) 实心圆表示初始节点 2、最后一个节点(结束) 圆圈内加一个实心圆来表…

C语言之字符逆序(牛客网)

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 字符逆序__牛客网 题目&#xff1a; 思路&#xff1a;既然有空格就不能用scanf函数来接收字符了。因为scanf函数遇到空格会停止读取。我们可以用get…

UE5 获得频谱让nigara随音乐律动

参考视频:UE - Niagara实现可视化音乐动态粒子效果 案例演示及教程_哔哩哔哩_bilibili 先创建一个Niagara 在Properties的Sim Target改为GPU,Calculate Bounds Mode改为Fixed模式 生成的数量改为1000 这里的BoxSize可以选择修改,具体作用是粒子初始生成的范围 Drag,阻力,用来限…

Java上(2024尚硅谷)

day01.[环境变量,HelloWorld] 1.会常用的dos命令 2.会安装java所需要的环境(jdk) 3.会配置java的环境变量 4.知道java开发三步骤 5.会java的入门程序(HelloWorld) 6.会三种注释方式 7.知道Java入门程序所需要注意的地方 8.知道println和print的区别第一章 Java概述 1.1 JavaS…

【自定义序列化器】⭐️通过继承JsonSerializer和实现WebMvcConfigurer类完成自定义序列化

目录 前言 解决方案 具体实现 一、自定义序列化器 二、两种方式指定作用域 1、注解 JsonSerialize() 2、实现自定义全局配置 WebMvcConfigurer 三、拓展 WebMvcConfigurer接口 章末 前言 小伙伴们大家好&#xff0c;上次做了自定义对象属性拷贝&#x…

Dijkstra算法(求最短路)

简介&#xff1a; 迪杰斯特拉算法(Dijkstra)是由荷兰计算机科学家狄克斯特拉于1959年提出的&#xff0c;因此又叫狄克斯特拉算法。是从一个顶点到其余各顶点的最短路径算法&#xff0c;解决的是有权图中最短路径问题。 特点&#xff1a; 迪杰斯特拉算法采用的是一种贪心策略&a…

【Java基础】关于Java基础的一些有趣的常识!

前言 今天看到了一篇文章&#xff0c;是关于茶余饭后的Java常识的一些有趣解答&#xff0c;我觉得写的很有趣很易懂&#xff0c;所以截取了其中我觉得比较有趣的问题分享给大家。原文&#xff1a;饭后茶余的java常识 - 知乎 (zhihu.com) 1. Java语言的特点有哪些&#xff1f; …

【并发编程】手写线程池阻塞队列

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程 ⛺️稳重求进&#xff0c;晒太阳 示意图 步骤1&#xff1a;自定义任务队列 变量定义 用Deque双端队列来承接任务用ReentrantLock 来做锁并声明两个条件变量 Condition fullWai…