for(var k in data.data){ str += "<td>" str += item[k] str += "</td>" }
时间: 2023-05-15 21:07:19 浏览: 41
这段代码是一个 JavaScript 中的 for-in 循环,用于遍历对象中的属性。在循环中,每次遍历到一个属性时,将该属性的值赋给 str 变量,并将其包裹在 td 标签中。但是,代码中的第二行和第三行都是将 str 变量重新赋值,所以最终 str 变量中只会保存最后一个属性的值。
相关问题
修改以下代码中表格样式,在table中增加分界线和每段文字之间距离 代码:var popup = document.createElement('div'); table.style.borderCollapse = 'collapse'; var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>'; let tableBody = '' for (let i = 0; i < dom.tableData.length; i++) { const obj = dom.tableData[i] tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>' } thead.innerHTML = tableHead; tbody.innerHTML = tableBody;
可以在代码中增加如下样式来实现表格中分界线和每段文字之间的距离:
```
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid black;
padding: 10px;
}
```
修改后的代码如下:
```
var popup = document.createElement('div');
table.style.borderCollapse = 'collapse';
table.style.borderSpacing = '0';
var tableHead = '<tr><th>映射对象id</th><th>映射对象类型</th><th>映射对象名称</th><th>操作</th></tr>';
let tableBody = ''
for (let i = 0; i < dom.tableData.length; i++) {
const obj = dom.tableData[i]
tableBody = tableBody + '<tr><td>'+ obj.dataId +'</td><td>'+ obj.type +'</td><td>'+ obj.dataName +'</td><td><button class="info-btn" data-name="张三" data-age="20" data-gender="男">查看</button></td></tr>'
}
thead.innerHTML = tableHead;
tbody.innerHTML = tableBody;
```
这样就可以在表格中增加分界线和每段文字之间的距离了。
在一个使用ssm框架编写的Maven项目中,我如何使用ajax访问WEB-INF下的名为buySeat.jsp的jsp页面?并帮我优化这段代码 function initSchedule(obj){ var plist = $(".plist").find("tbody"); for(var i = 0;i < obj.data.length;i++){ plist.append( "<tr class=\"\">" + "<td> <span class=\"begin-time\">"+ obj.data[i].schedule_startTime +"</span> <br> </td>" + "<td> <span class=\"lang\">" + obj.data[i].schedule_movie.movie_country +"</span> </td>" + "<td> <span class=\"hall\">" + obj.data[i].schedule_hall.hall_name + "</span> </td>" + "<td> <span class=\"sell-price\"> <span class=\"stonefont\">" + obj.data[i].schedule_price + "</span> </span> </td>" + "<td> <a href="+ obj.data[i].schedule_id +"\"./buySeat?schedule_id=\" class=\"buy-btn normal\">选座购票</a> </td>" + "</tr>" ); } }
在使用SSM框架编写的Maven项目中,要使用Ajax访问WEB-INF下的jsp页面,需要按照以下步骤操作:
1. 将buySeat.jsp页面移动到webapp目录下,而不是WEB-INF目录下。因为WEB-INF目录默认情况下不能直接访问。
2. 在Controller中添加一个处理Ajax请求的方法,该方法返回buySeat.jsp页面的路径。
3. 在前端代码中使用Ajax调用这个请求方法,并将返回的页面路径作为URL传递给a标签的href属性。
以下是优化后的代码:
```javascript
function initSchedule(obj) {
var plist = $(".plist").find("tbody");
for (var i = 0; i < obj.data.length; i++) {
plist.append(
"<tr class=\"\">" +
"<td> <span class=\"begin-time\">" + obj.data[i].schedule_startTime + "</span> <br> </td>" +
"<td> <span class=\"lang\">" + obj.data[i].schedule_movie.movie_country + "</span> </td>" +
"<td> <span class=\"hall\">" + obj.data[i].schedule_hall.hall_name + "</span> </td>" +
"<td> <span class=\"sell-price\"> <span class=\"stonefont\">" + obj.data[i].schedule_price + "</span> </span> </td>" +
"<td> <a href=\"./buySeat?schedule_id=" + obj.data[i].schedule_id + "\" class=\"buy-btn normal\">选座购票</a> </td>" +
"</tr>"
);
}
}
```
请注意,以上代码假设你已经将buySeat.jsp页面移动到了webapp目录下,并在Controller中添加了处理Ajax请求的方法。确保URL的正确性和后端的相应处理。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="checkbox" id="selectAll"> 学生编号 学生学号 学生姓名 学生性别 学生出生日期 学生地址 学生电话 学生照片 学生班级 操作 <c:forEach items="${list.list }" var="student" varStatus="status"> <input type="checkbox" name="idCheckbox" value="${student.stuId }"> ${student.stuId } ${student.stuNo} ${student.stuName } ${student.stuSex } ${student.stuBirth } ${student.stuAddress } ${student.stuPhone } ![]()
${student.classes.className } 美化一下
<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".delete_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button> 用户ID 爱好 家庭住址 操作 <input type="checkbox" class="check_item"> 1 跑步 江苏省无锡市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 2 打球 江苏省南京市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 3 跳舞 安徽省合肥市 <button class="delete_item">删除</button> <button class="deleteAll">批量删除</button> 将批量删除改正确
<input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用
<form action="SelectNews" method="post"> 请输入查询条件:<input type="text" name="key"> <input type="submit" value="查询"> </form>
编号 标题 类型 发布人 发布日期 状态 是否头条 操作 <c:forEach items="${newsList }" var="news"> ${news.nid } ${news.title } ${news.type } ${news.userName } ${news.pubtime } <c:choose> <c:when test="${news.state==0 }">待审核</c:when> <c:when test="${news.state==1 }">通过</c:when> <c:otherwise>未通过</c:otherwise> </c:choose> <c:choose> <c:when test="${news.top==0 }">否</c:when> <c:otherwise>是</c:otherwise> </c:choose> ${news.top==0?"是":"否" } 查看 修改 <c:if test="${user.rule==0 }"> 删除 </c:if> <c:if test="${user.rule==0 }"> 审核</c:if> </c:forEach> 这是前端代码如何优化为上文你所陈述的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".delete_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button> 用户ID 爱好 家庭住址 操作 <input type="checkbox" class="check_item"> 1 跑步 江苏省无锡市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 2 打球 江苏省南京市 <button class="delete_item">删除</button> <input type="checkbox" class="check_item"> 3 跳舞 安徽省合肥市 <button class="delete_item">删除</button> <button class="deleteAll">批量删除</button> 将批量删除改正确
<input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用
<form action="SelectNews" method="post"> 请输入查询条件:<input type="text" name="key"> <input type="submit" value="查询"> </form>
编号 标题 类型 发布人 发布日期 状态 是否头条 操作 <c:forEach items="${newsList }" var="news"> ${news.nid } ${news.title } ${news.type } ${news.userName } ${news.pubtime } <c:choose> <c:when test="${news.state==0 }">待审核</c:when> <c:when test="${news.state==1 }">通过</c:when> <c:otherwise>未通过</c:otherwise> </c:choose> <c:choose> <c:when test="${news.top==0 }">否</c:when> <c:otherwise>是</c:otherwise> </c:choose> ${news.top==0?"是":"否" } 查看 修改 <c:if test="${user.rule==0 }"> 删除 </c:if> <c:if test="${user.rule==0 }"> 审核</c:if> </c:forEach> 这是前端代码如何优化为上文你所陈述的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="checkbox" id="select-all"> 录入时间 退货单号 录入人 备注 状态 日志 {%for item in data%} <input type="checkbox" value="{{item[1]}}" name="id"> {{item[0]}} {{item[1]}} {{item[2]}} {{item[3]}} {% if item[4] is none %}{% else %}{{item[4]}}{% endif %} 日志 {%endfor%} <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<form action="SelectNews" method="post"> 请输入查询条件:<input type="text" name="key"> <input type="submit" value="查询"> </form>
编号 标题 类型 发布人 发布日期 状态 是否头条 操作 <c:forEach items="${newsList }" var="news"> ${news.nid } ${news.title } ${news.type } ${news.userName } ${news.pubtime } <c:choose> <c:when test="${news.state==0 }">待审核</c:when> <c:when test="${news.state==1 }">通过</c:when> <c:otherwise>未通过</c:otherwise> </c:choose> <c:choose> <c:when test="${news.top==0 }">否</c:when> <c:otherwise>是</c:otherwise> </c:choose> ${news.top==0?"是":"否" } 查看 修改 <c:if test="${user.rule==0 }"> 删除 </c:if> <c:if test="${user.rule==0 }"> 审核</c:if> </c:forEach> 这是前端代码如何优化为上文你所陈述的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)