28,391
社区成员
发帖
与我相关
我的任务
分享求助，如何将图片动态添加到查询结果中
前端我是使用jQuery来编写的。
不知道如何在动态生成的查询结果表格中添加所对应的图片，数据库对应存着图片的url。不知道如何用ajax发相应请求实现。在网上找了一些帖子都不太对应我的问题，特来求助。直接代码描述或者视频教程链接都好，多谢。
下面是html，css和js代码
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/products.css">
<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="script/products.js"></script>
</head>
<body>
<!-- 隐藏分页信息 -->
<input type="hidden" name="pageNum" value="1" id="pageNum">
<input type="hidden" name="pageSize" value="3">
<div id="condition">
产品序列号：<input type="text" name="pid">
产品名称 ：<input type="text" name="pname">
设备id：<input type="text" name="eid">
<input type="button" value="隐藏查询按钮" id="searchBtn">
<input type="button" value="查询" id="searchBtnShow">
</div>
<div id="resultdiv">
<table id="resulttable">
<tr>
<th>产品序列号</th>
<th>产品名称</th>
<th>产品图片</th>
<th>设备id</th>
<th>产能</th>
<th>操作</th>
</tr>
</table>
</div>
<div id="pagectrl">
共<span id="total"></span>条
共<span id="pages"></span>页
第<span id="curpage"></span>页
<a href="javascript:void(0)" id="prePage">上一页</a><span id="prePageSpan">上一页</span>
<input type="number" id="gopage" min="1"> <a href="javascript:void(0)" id="goBtn">Go</a>
<a href="javascript:void(0)" id="nextPage">下一页</a><span id="nextPageSpan">下一页</span>
</div>
<a href="addproducts.html">添加产品</a>
<style>
body{
background-image: url(onepiece/timg.jpg);
}
</style>
</body>
</html>
css代码：
/*表格间隔设置*/
#table th,#table td{
border: 1px black solid;
padding: 10px;
}
/*单元格配置，白底黑字*/
#reulttable th{
background-color: aliceblue;
color: black;
}
/*结果页面位置设置*/
#resultdiv{
margin-top: 20px;
text-align:center;
display: none;
}
/*分页控制*/
#pagectrl{
font-size: 0.8em;
text-align: center;
display: none;
}
/*跳转框设置*/
#gopage{
width: 30px;
}
/*分页按钮设置*/
#prePageSpan,#nextPageSpan{
font-size:0.8em;
}
/*两种按钮的配置*/
#searchBtn{
display: none;
}
js代码
// 分页查询的功能实现
$(function () {
$("#searchBtnShow").click(function () {
$("#pageNum").val(1);
$("#searchBtn").click();
});
$("#searchBtn").click(function () {
//发送ajax请求
$.post("/cloudproduce/searchproducts", $("[name]").serialize(), function (data) {
//真正查到数据了
if (data && data.size > 0) {
// 1.动态添加各种信息
// 添加总记录条数
$("#total").html(data.total);
//添加总页数
$("#pages").html(data.pages);
//添加当前页数
$("#curpage").html(data.pageNum);
// 2.添加记录
// 先把表格中原有的记录航删除
$("#resulttable tr:gt(0)").remove();
// 遍历结果集，添加数据行
for (var i = 0; i < data.list.length; i++) {
var products = data.list[i];
// 创建一行，生成tr元素
var oTr = $("<tr></tr>");
// 创建单元格，生成td元素，放到tr中
$("<td></td>").html(products.pid).appendTo(oTr);
$("<td></td>").html(products.pname).appendTo(oTr);
$("<td></td>").html(products.ppicture).appendTo(oTr);
$("<td></td>").html(products.eid).appendTo(oTr);
$("<td></td>").html(products.pp).appendTo(oTr);
//动态生成删除按钮，如果是当前用户则不能删除
var oTd = $("<td></td>").appendTo(oTr);
$("<input type='button' value='删除'>").click(function () {
//进行二次确认
var isOK = confirm("您是真的要删除吗");
//真正删除用户
if (isOK) {
//如何获取当前删除用户的id
//通过DOM模型对象间的父子关系，来获取userid
var pid =
$(this).parent().parent().find("td:eq(0)").html();
//发送ajax请求，删除数据
$.post("/cloudproduce/delproducts", "pid=" + pid, function (data) {
if (data == "true") {
//删除成功
alert("删除成功");
$("#searchBtn").click();
} else {
//删除失败
alert("删除失败，请重试！");
}
}, "text");
}
}).appendTo(oTd);
//添加修改按钮
$("<input type ='button' value='修改'>").click(function () {
if ($(this).val() == "修改") {
//如果当前按钮上的按钮是修改，用户点击的是修改功能
//1.用户名变为可编辑状态
//1.1获取第二个单元格对象
var oTd2 = $(this).parent().parent().find("td:eq(1)");
//1.2获取其中的文本
var pname = oTd2.html();
//清空单元格
oTd2.empty();
//1.3动态生成一个新的文本框，将用户名初始化到其中，并将其放到oTd2中
$("<input type ='text'>").css("width", "50px").val(pname).appendTo(oTd2);
//2.将密码变为可编辑状态
//2.1获取第三个单元格对象
var oTd3 = $(this).parent().parent().find("td:eq(2)");
//获取其中的文本
var ppicture = oTd3.html();
//2.2清空单元格
oTd3.empty();
//2，3动态生成密码文本框
$("<input type='text'>").css("width", "50px").val(ppicture).appendTo(oTd3);
var oTd4 = $(this).parent().parent().find("td:eq(3)");
//获取其中的文本
var eid = oTd4.html();
//2.2清空单元格
oTd4.empty();
//2，3动态生成密码文本框
$("<input type='text'>").css("width", "50px").val(eid).appendTo(oTd4);
var oTd5 = $(this).parent().parent().find("td:eq(4)");
//获取其中的文本
var pp = oTd5.html();
//2.2清空单元格
oTd5.empty();
//2，3动态生成密码文本框
$("<input type='text'>").css("width", "50px").val(pp).appendTo(oTd5);
//将按钮变为确定按钮value改成“确定”
$(this).val("确定");
} else
if ($(this).val() == "确定") {
//如果当前按钮上的按钮是确定，用户点击的是确定功能
//1.页面验证
//1.1验证用户是否有效输入
//获取当前行第二个单元格的文本框对象
var oText2 = $(this).parent().parent().find("td:eq(1) input");
var pname = oText2.val();
if (!pname) {
alert("请输入产品序列号");
oText2.focus();
return;
}
//1.2验证密码是否填写
var oText3 = $(this).parent().parent().find("td:eq(2) input");
var ppicture = oText3.val();
if (!ppicture) {
alert("请添加图片");
oText3.focus();
return;
}
var oText4 = $(this).parent().parent().find("td:eq(3) input");
var eid = oText4.val();
if (!eid) {
alert("请添加设备id");
oText4.focus();
return;
}
var oText5 = $(this).parent().parent().find("td:eq(4) input");
var pp = oText5.val();
if (!pp) {
alert("请添加产能");
oText5.focus();
return;
}
//2.发送ajax请求
//获取当前用户id
var pid = $(this).parent().parent().find("td:eq(0)").html();
var oBtn = $(this);
$.post("/cloudproduce/modproducts", "pid=" + pid + "&pname=" + pname + "&ppicture=" + ppicture+ "&eid" + eid+ "&pp=" + pp, function (data) {
if (data == "true") {
//修改成功
//跨作用域访问，闭包
//1.将用户名还原成不可编辑状态
var oTd2 = oBtn.parent().parent().find("td:eq(1)");
var oText2 = oTd2.find("input");
var pname = oText2.val();
oTd2.empty();
oTd2.html(pname);
有字数限制后面的发不了了，不过也没影响，后面只是一些分页控制了。
...全文
请发表友善的回复…
发表回复
jio可 2020-07-24
- 打赏
- 举报
用es6 ``语法拼接html吧，然后样式可以统一写到css文件
$("<td></td>").append($("<img>").attr("width", 50).attr("height", 50).attr("src", products.ppicture)).appendTo(oTr);
`
<td>
<img src="${products.ppicture}"/>
</td>
`
.css
xxx td img {
width: 50px;
height: 50px;
}
你好像有大饼 2020-07-24
- 打赏
- 举报
$("<td></td>").append($("<img>").attr("width", 50).attr("height", 50).attr("src", products.ppicture)).appendTo(oTr);
这样就行了，谢谢
jio可 2020-07-23
- 打赏
- 举报
图片直接在td里面写img放返回图片rul到src不就可以了？
$("<td></td>").html(`<img src="${products.ppicture}">`).appendTo(oTr);
