当前位置： 首页 > news >正文

日常开发20251022，传统HTML表格实现图片+视频+预览

news 2025/10/23 8:06:54

问题描述

来了一个需求，参考一个页面，想实现如下效果。这效果，一般来说，没法搞。因为参考系统其他页面，也就应了下来。

问题分析

首先。是一个列表，有筛选，有分页；

其此。每条数据，结构比较复杂，有题干、有答案，有视频，有图片。

最后。当然，图片和视频都要去预览。

问题学习

万变不离其宗，还是一个table实现。

表单html部分：

<div style="margin-left: 10%;margin-right:20%;border-radius:5px;">
<table id="dataTable"  class="table table-bordered table-striped"></table>&emsp;
</table>
</div>

js部分：

<script>let url = "/detectionTestLog/showTopicDetailList";let paperId = '$paper.id' ;let typeArr = velocityMapToJson("$topicTypeMap");$(function () {searchList();});/*** 点击查询，加载列表数据*/function searchList(){let params = {};params.paperId = paperId;params.topicId =  $("input[name='topicId']").val();load("dataTable", columns, url, params);}const columns = [{data: "classify", title: "", render: function (data, type, row, meta) {let html = "";html += "<div class='carImgDiv'>&emsp;";html += "<label>";html += (meta.row + 1) + "、" + row.content + " <span style='color: #aa7700'>(" + typeArr[row.type] + ")</span></label>&emsp;";html += "题目编号：" + row.topicId + "&emsp;" ;if (row.pics) {let picsArr = row.pics.split(",")html += '<div class="input-group"style="margin-left:28px"><label>题干图片</label><br>'for (let j = 0; j < picsArr.length; j++) {html += '<img loading="lazy" data-src="https://static.chaboshi.cn/' + picsArr[j] + '" width="100px" style="margin: 10px">'}html += '</div>&emsp;'}if (row.videos) {let videosArr = row.videos.split(",")html += '<div class="input-group"style="margin-left:28px"><label>题干视频</label><br>'for (let j = 0; j < videosArr.length; j++) {html += '<video width="320" height="240" controls><source src="https://static.chaboshi.cn/' + videosArr[j] + '" type="video/mp4"></video>'}html += '</div>&emsp;'}html += '<div class="input-group">&emsp;&emsp;'if (row.answerDetail) {html += '<label>答案详情';html += '<pre>' + row.answerDetail + '</pre>'}html += '</label></div>'if (row.answerPics) {let picsArr = row.answerPics.split(",")html += '<div class="input-group"style="margin-left:28px"><label>答案详情图片</label><br>'for (let j = 0; j < picsArr.length; j++) {html += '<img loading="lazy" data-src="https://static.chaboshi.cn/' + picsArr[j] + '" width="100px" style="margin: 10px">'}html += '</div>'}if (row.answerVideos) {let videosArr = row.answerVideos.split(",")html += '<div class="input-group"style="margin-left:28px"><label>答案详情视频</label><br>'for (let j = 0; j < videosArr.length; j++) {html += '<video width="320" height="240" controls><source src="https://static.chaboshi.cn/' + videosArr[j] + '" type="video/mp4"></video>'}html += '</div>&emsp;'}html += '</div>'html += '<div class="input-group">&emsp;&emsp;'html += '<label>正确答案(<span style="color: #19a05e;font-size: 22px;">✓</span>) </label>';html += '</div>'let answerIdHtml = '';if(row.topicAnswers){for (let j = 0; j < row.topicAnswers.length; j++) {let htmlContent = notNull(row.topicAnswers[j].content)?row.topicAnswers[j].content:'-';if (row.topicAnswers[j].rightAnswers == true) {htmlContent = '<span style="color: #19a05e;font-size: 22px;">✓</span>' + htmlContent} else {htmlContent = '&emsp;' + htmlContent}answerIdHtml += "<div class=\"input-group\"> &emsp;&emsp;" + htmlContent + "</div>"}}html += '<div class="input-group"style="margin-left:28px">&emsp;&emsp;'html += '<pre>' + answerIdHtml + '</pre>'html += '</div>'html += '<div class="input-group">&emsp;&emsp;'html += '<label>选择情况</label>'html += '<strong style="margin-left: 15px;">答题次数：</strong><span>'+row.topicSum+'</span>';html += '<strong style="margin-left: 15px;">正确次数：</strong><span>'+row.rightCount+'</span><span>('+row.rightDesc+')</span>';html += '<strong style="margin-left: 15px;">错误次数：</strong><span>'+row.errorCount+'</span><span>('+row.errorDesc+')</span>';html += '<strong style="margin-left: 15px;">正确率：</strong><span>'+row.rightRate+'%</span>';html += '</div>'setTimeout(function () {$("img[data-src]").each(function () {$(this).attr("src", $(this).attr("data-src"));$(this).removeAttr("data-src");});$('.carImgDiv').viewer()}, 1000)return html;}}]</script>

看到了吗，利用load("dataTable", columns, url, params);，实现分页的效果。但仅仅定义了一列，里边自定义了一段html片段，实现了这样一个效果，还是让人心里一惊。

这里也可以写setTimeout
html += '</div>'setTimeout(function () {$("img[data-src]").each(function () {$(this).attr("src", $(this).attr("data-src"));$(this).removeAttr("data-src");});$('.carImgDiv').viewer()
}, 1000)

这个方法的主要作用是实现图片的延迟加载（懒加载）并初始化图片查看器，具体功能如下： 1. **延迟执行逻辑**：通过 `setTimeout` 设置了1秒（1000毫秒）的延迟，等待1秒后再执行内部代码。 2. **图片加载处理**： - 选择所有带有 `data-src` 属性的 `img` 元素（`$("img[data-src]")`）。 - 遍历这些图片，将 `data-src` 属性的值赋值给 `src` 属性（`$(this).attr("src", $(this).attr("data-src"))`），此时图片才会真正开始加载。 - 移除 `data-src` 属性（`$(this).removeAttr("data-src")`），避免重复处理。 3. **初始化图片查看器**：调用 `$('.carImgDiv').viewer()` 方法，为类名为 `carImgDiv` 的元素初始化图片查看器插件（通常用于实现图片放大、预览等功能）。 简单来说，这段代码的目的是：等待1秒后，加载页面中标记为延迟加载的图片（通过 `data-src` 存储真实地址），并初始化对应的图片查看器功能。延迟1秒可能是为了等待页面其他资源加载完成，或配合某些交互场景。

渲染每一行结束，替换变量，实现图片预览的效果。那能不能渲染后，只执行一次呢？理论上当然可以，但是分散到每一行去执行，也不失为一个好办法。体验好、风险低。

完整源代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>考卷题目详情</title>#parse("/views/inc/head.vm")<link rel="stylesheet" href="/kindeditor/default.css"/><link rel="stylesheet" href="/kindeditor/prettify.css"/><link rel="stylesheet" href="$!{cdn_domain}/css/viewer.css"><style>.center {text-align: center;border: #8c8c8c;outline: none;background-color: #eee;width: 80px;margin-top: 5px;}</style>
</head>
<body class="$!{skin}">
#parse("/views/inc/nav_top.vm")
<!-- Left side column. contains the logo and sidebar -->
<!-- UEditor -->
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/zh_CN.js"></script>
<script charset="utf-8" src="/kindeditor/prettify.js"></script></head>
#parse("/views/inc/nav_left.vm")<!-- Main content -->
<section class="content"><div class="row"><div class="col-md-12"><!-- Advanced Tables --><div class="panel panel-default"><div class="panel-body"><form action="/detectionTestPaper/save" name="paperForm" method="post"id="topicForm"class="form-horizontal"><input type="hidden" id="id" name="id" value="${paper.id}"/><input type="hidden" id="topicArr" name="topicArr"/><div class="form-group"><label class="col-sm-2 control-label">题目标题：</label><div class="col-sm-4"><input class="input-css" style="border: #8c8c8c;" value="$!{paper.title}"></div></div>&emsp;<div class="form-group"><label class="col-sm-2 control-label">考试次数：</label><div class="col-sm-8"><div><label><input class="input-css center" readonly value="$!{logCount}"/>&emsp;&emsp;考试人数：<input class="input-css center" readonly value="$!{testCount}"/>&emsp;</label><label>题目编号： <input class="input-css center" name="topicId" type="number"/>&emsp;</label><button class="btn btn-info btn-xs" onclick="searchList(); return false;">查询</button></div>&emsp;</div></div>&emsp;</form><div style="margin-left: 10%;margin-right:20%;border-radius:5px;"><table id="dataTable"  class="table table-bordered table-striped"></table>&emsp;
<!--                            <thead>-->
<!--                            <tr>-->
<!--                                <td>序号</td>-->
<!--                                <td>题目</td>-->
<!--                                <td>题型</td>-->
<!--                                <td>答题次数</td>-->
<!--                                <td>正确次数</td>-->
<!--                                <td>错误次数</td>-->
<!--                                <td>正确率</td>-->
<!--                            </tr>-->
<!--                            </thead>-->
<!--                            <tbody>-->
<!--                            #if($!topicList.size()>0)-->
<!--                            #foreach($e in $!topicList)-->
<!--                            <tr>-->
<!--                                <td>$foreach.count</td>-->
<!--                                <td>$e.content</td>-->
<!--                                <td>$!topicTypeMap[$e.type]</td>-->
<!--                                <td>$e.topicSum</td>-->
<!--                                <td>$e.rightAnswer</td>-->
<!--                                <td>$e.errorAnswer</td>-->
<!--                                #set($Double = 0.00)-->
<!--                                #set($fund= ($Double.parseDouble($e.rightAnswer) / $Double.parseDouble($e.topicSum)) * 100)-->
<!--                                <td>$number.format("#0.00", $fund)   %</td>-->
<!--                            </tr>-->
<!--                            #end-->
<!--                            #else-->
<!--                            <tr><td colspan='7' style="text-align: center;">暂无数据</td></tr>-->
<!--                            #end-->
<!--                            </tbody>-->
<!--                        </table>&emsp;--></div></div></div><!--End Advanced Tables --></div></div>
</section>
#parse("/views/inc/nav_bottom.vm")<script src="$!{cdn_domain}/js/viewer.js" type="text/javascript"></script>
<script>let url = "/detectionTestLog/showTopicDetailList";let paperId = '$paper.id' ;let typeArr = velocityMapToJson("$topicTypeMap");$(function () {searchList();});/*** 点击查询，加载列表数据*/function searchList(){let params = {};params.paperId = paperId;params.topicId =  $("input[name='topicId']").val();load("dataTable", columns, url, params);}const columns = [{data: "classify", title: "", render: function (data, type, row, meta) {let html = "";html += "<div class='carImgDiv'>&emsp;";html += "<label>";html += (meta.row + 1) + "、" + row.content + " <span style='color: #aa7700'>(" + typeArr[row.type] + ")</span></label>&emsp;";html += "题目编号：" + row.topicId + "&emsp;" ;if (row.pics) {let picsArr = row.pics.split(",")html += '<div class="input-group"style="margin-left:28px"><label>题干图片</label><br>'for (let j = 0; j < picsArr.length; j++) {html += '<img loading="lazy" data-src="https://static.chaboshi.cn/' + picsArr[j] + '" width="100px" style="margin: 10px">'}html += '</div>&emsp;'}if (row.videos) {let videosArr = row.videos.split(",")html += '<div class="input-group"style="margin-left:28px"><label>题干视频</label><br>'for (let j = 0; j < videosArr.length; j++) {html += '<video width="320" height="240" controls><source src="https://static.chaboshi.cn/' + videosArr[j] + '" type="video/mp4"></video>'}html += '</div>&emsp;'}html += '<div class="input-group">&emsp;&emsp;'if (row.answerDetail) {html += '<label>答案详情';html += '<pre>' + row.answerDetail + '</pre>'}html += '</label></div>'if (row.answerPics) {let picsArr = row.answerPics.split(",")html += '<div class="input-group"style="margin-left:28px"><label>答案详情图片</label><br>'for (let j = 0; j < picsArr.length; j++) {html += '<img loading="lazy" data-src="https://static.chaboshi.cn/' + picsArr[j] + '" width="100px" style="margin: 10px">'}html += '</div>'}if (row.answerVideos) {let videosArr = row.answerVideos.split(",")html += '<div class="input-group"style="margin-left:28px"><label>答案详情视频</label><br>'for (let j = 0; j < videosArr.length; j++) {html += '<video width="320" height="240" controls><source src="https://static.chaboshi.cn/' + videosArr[j] + '" type="video/mp4"></video>'}html += '</div>&emsp;'}html += '</div>'html += '<div class="input-group">&emsp;&emsp;'html += '<label>正确答案(<span style="color: #19a05e;font-size: 22px;">✓</span>) </label>';html += '</div>'let answerIdHtml = '';if(row.topicAnswers){for (let j = 0; j < row.topicAnswers.length; j++) {let htmlContent = notNull(row.topicAnswers[j].content)?row.topicAnswers[j].content:'-';if (row.topicAnswers[j].rightAnswers == true) {htmlContent = '<span style="color: #19a05e;font-size: 22px;">✓</span>' + htmlContent} else {htmlContent = '&emsp;' + htmlContent}answerIdHtml += "<div class=\"input-group\"> &emsp;&emsp;" + htmlContent + "</div>"}}html += '<div class="input-group"style="margin-left:28px">&emsp;&emsp;'html += '<pre>' + answerIdHtml + '</pre>'html += '</div>'html += '<div class="input-group">&emsp;&emsp;'html += '<label>选择情况</label>'html += '<strong style="margin-left: 15px;">答题次数：</strong><span>'+row.topicSum+'</span>';html += '<strong style="margin-left: 15px;">正确次数：</strong><span>'+row.rightCount+'</span><span>('+row.rightDesc+')</span>';html += '<strong style="margin-left: 15px;">错误次数：</strong><span>'+row.errorCount+'</span><span>('+row.errorDesc+')</span>';html += '<strong style="margin-left: 15px;">正确率：</strong><span>'+row.rightRate+'%</span>';html += '</div>'setTimeout(function () {$("img[data-src]").each(function () {$(this).attr("src", $(this).attr("data-src"));$(this).removeAttr("data-src");});$('.carImgDiv').viewer()}, 1000)return html;}}]</script></body>
</html>

问题总结

天地之大，无所不能，万变不离其宗。没什么不可以；老技术，也可以焕发新魅力。当然，也要非常积极的拥抱新技术。

http://www.dtcms.com/a/515632.html

相关文章：

  • 标题：鸿蒙Next音频开发新篇章：深入解析Audio Kit（音频服务）
  • 湖滨区建设局网站app开发公司排行榜做软件的公司
  • UDP实现客服与客户的咨询对话
  • 学习HAL库STM32F103C8T6（实时时钟项目、WIFI天气预报项目）
  • npm、yarn、pnpm的对比和优略
  • 离散卷积，小demo（小波信号分析）
  • Java 大视界 -- Java 大数据在智能教育学习社区互动模式创新与用户活跃度提升中的应用（426）
  • 建设比较好网站服务器用来做网站和数据库
  • C# iText7与iTextSharp导出PDF对比
  • HARDWARE 属性的Bitmap与普通Bitmap，GPU与RenderThread渲染与处理方式异同比较，Android
  • 东营市做网站的公司h5学习教程
  • 不同类型的金融产品（如股票、期货、加密货币）双时间尺度优化的差异化调整
  • xtuoj Repeat One
  • ENSP Pro Lab笔记：配置STP/RSTP/MSTP（3）
  • **发散创新：模拟计算的高级应用与实现**随着科技的飞速发展，模拟计算已经成为了众多领域的核心工
  • EasyGBS如何在平安乡村搭建无线视频联网监控系统？
  • 上新！联软科技发布新一代LeagView平台，用微服务重塑终端安全
  • 【以太来袭】2. 节点设计与部署
  • 增加网站广告位建网站首页图片哪里找
  • Yolo分割数据集错误数据删除
  • Redis原理篇（一）数据结构
  • 1022作业
  • 北京商城型网站建设网上商城的意义
  • 《3D端游云原生日志：开放世界资源加载卡顿的实战与经验沉淀》
  • 2025年渗透测试面试题总结-213（题目+回答）
  • 技术演进中的开发沉思-146 java-servlet：Servlet 在云原生时代的适配”
  • 网件路由器做网站装修公司加盟好还是自己开
  • 【自适应滤波例程】基于新息协方差匹配的自适应EKF (无迹卡尔曼滤波) vs 经典EKF对比，附MATLAB代码下载链接
  • 获得网站源文件破解WordPress站点
  • 【OpenManus深度解析】MetaGPT团队打造的开源AI智能体框架，打破Manus闭源壁垒。包括架构分层、关键技术特点等内容