81,091
社区成员
发帖
与我相关
我的任务
分享新手求问！怎么在jsp中点击增加按钮时增加相同的一行，点击删除按钮时这一行删除
代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="helpRegister" name="form" method="post">
<table>
<tr><td>用户名称：</td><td><input type="text" name="logname"></td>
<td>设置密码：</td><td><input type="password" name="password"></td>
<td><input type="submit" value="增加" name=""></td>
<td><input type="submit" value="删除" name=""></td>
<td><input type="submit" value="修改密码" name=""></td>
<td><input type="submit" value="查询密码" name=""></td>
</tr>
</table>
</form>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="helpRegister" name="form" method="post">
<table>
<tr><td>用户名称：</td><td><input type="text" name="logname"></td>
<td>设置密码：</td><td><input type="password" name="password"></td>
<td><input type="submit" value="增加" name=""></td>
<td><input type="submit" value="删除" name=""></td>
<td><input type="submit" value="修改密码" name=""></td>
<td><input type="submit" value="查询密码" name=""></td>
</tr>
</table>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
bobolnear 2016-07-04
- 打赏
- 举报
删除动态添加到table中的tr
$("#comm tr").empty();
comm为table的id
$("#comm tr:not(:first)").empty();
保留第一行，删除其它所有的行
增加table tr
$.post(rootpath + "/fieldpack/view", { fipaintno: intno }, function(data) {
$("#comm tr").empty();
for (var i = 0; i < data.length; i++) {
var newline = $("#comm").length;
var row = comm.insertrow(newline);
var col = row.insertcell(0);
col.innerhtml = data[i].userintno;
col = row.insertcell(1);
col.innerhtml = data[i].fipaintno;
}
}, 'json');
include000 2016-05-31
- 打赏
- 举报
jquery ajax 配合后台程序可以完成你这功能。
oxcow 2016-05-31
- 打赏
- 举报
<html>
<head>
<title>demo</title>
</head>
<body>
<button onclick="addRow()">添加行-方法1</button>
<button onclick="addRowByNode()">添加行-方法2</button>
<table border='1' width='60%' id='myTable'>
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>Operator</th>
</tr>
</thead>
<tbody id='myTbody'>
<tr>
<td>col1 1</td>
<td>col1 1</td>
<td><button onclick="delRow(this);">delete this row</button></td>
</tr>
</tbody>
</table>
</body>
<script type='text/javascript'>
var oTable = document.getElementById("myTable");
var oTbody = document.getElementById("myTbody");
var delRow = function (oBtn){
var oTd = oBtn.parentNode;
var oTr = oTd.parentNode;
//var oTbody = oTr.parentNode;
oTbody.removeChild(oTr);
}
var addRow = function(){
var rowNum = oTable.rows.length;
console.log(rowNum);
var newRowIndex = rowNum;
var newRow = oTable.insertRow(newRowIndex);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = "col1 " + rowNum;
cell2.innerHTML = "col2 " + rowNum;
cell3.innerHTML = '<button onclick="delRow(this);">delete this row</button>'
}
var addRowByNode = function(){
var oTr = document.createElement("tr");
console.log(oTr);
oTr.innerHTML = '<td>new col1</td>'
+ '<td>new col2</td>'
+ '<td><button onclick="delRow(this);">delete this row</button></td>';
oTbody.appendChild(oTr);
}
</script>
</html>
ouzhijian 2016-05-31
- 打赏
- 举报
document.getElementById("table").appendChild("<tr><td>1</td><td>2</td><td>3</td></tr>");添加一行
document.getElementById("table").removeChild(你要删除的DOM对象);
wo小懒猪 2016-05-30
- 打赏
- 举报
要想实现这些功能，建议去学习下js框架：ajax，里面有很丰富的页面设计功能。开发出来的产品更灵活，实用。
白缘 2016-05-30
- 打赏
- 举报
使用数据库存储数据，每次都从数据库中查找数据，增加一条信息就向数据库增加数据，删除将数据库的一条信息删除即可，下次查询的时候数据就会相应的增加或者删除了。
白缘 2016-05-30
- 打赏
- 举报
使用数据库存储数据，每次都从数据库中查找数据，增加一条信息就向数据库增加数据，删除将数据库的一条信息删除即可，下次查询的时候数据就会相应的增加或者删除了。
神话jsh 2016-05-30
- 打赏
- 举报
很简单啊，你可以用jquery中的append和remove来实现新增和删除，具体写法你可以网上看看jquery的教程
菜 头 2016-05-30
- 打赏
- 举报
你看下jquery的remove和append呗
桐小目 2016-05-30
- 打赏
- 举报
这是对应的action
package org.action;
import java.util.*;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import org.hibernate.*;
import org.model.*;
import org.util.HibernateSessionFactory;
public class DeletesAction {
private int loginId;
private int loginDetailId;
public int getLoginId() {
return loginId;
}
public void setLoginId(int loginId) {
this.loginId = loginId;
}
public int getLoginDetailId() {
return loginDetailId;
}
public void setLoginDetailId(int loginDetailId) {
this.loginDetailId = loginDetailId;
}
public String execute() throws Exception{
Session session=HibernateSessionFactory.getSession();
Transaction ts=session.beginTransaction();
Query query=session.createQuery("delete Login where id=?");
query.setParameter(0, loginId);
query.executeUpdate();
Query query2=session.createQuery("delete LoginDetail where id=?");
query2.setParameter(0, loginDetailId);
query2.executeUpdate();
ts.commit();
HibernateSessionFactory.closeSession();
return "success";
}
}
里面的操作是在数据库里面删除对应的用户，你的话只要改成从session里面获取count值，count++或者count--，然后再放回session就行，（这是用struts2的）
桐小目 2016-05-30
- 打赏
- 举报
<table class="table table-hover">
<tr>
<th> 用户ID </th>
<th> 邮箱</th>
<th> 昵称</th>
<th> 联系方式</th>
<th> 邮编</th>
<th> 是否删除</th>
</tr>
<%
Session session1=HibernateSessionFactory.getSession();
Query query1=session1.createQuery("from Login");
List <?> list1=query1.list();
Query query2=session1.createQuery("from LoginDetail");
List <?> list2=query2.list();
for(int i=0;i<list1.size();i++) {
Login login=(Login) list1.get(i);
LoginDetail loginDetail=(LoginDetail) list2.get(i);
%>
<tr>
<th><%= login.getId()%> </th>
<td><%= login.getEmail()%> </td>
<td><%= loginDetail.getNickname()%> </td>
<td><%= loginDetail.getPhonenumber()%> </td>
<td><%= loginDetail.getPostcodes()%> </td>
<td>
<s:form action="deletes.action" method="post">
<input name="loginId" type="hidden" value="<%=login.getId()%>" />
<input name="loginDetailId" type="hidden" value="<%=loginDetail.getId()%>"/>
<button class="btn btn-primary" type="submit">删除</button>
</s:form>
</td>
</tr>
<%
}
HibernateSessionFactory.closeSession();
%>
</table>
这是我通过数据库来进行行数遍历的jsp代码，你不需要用数据库用一个变量传值就成。
ssl970432178 2016-05-29
- 打赏
- 举报
没有看懂，有没有代码
桐小目 2016-05-29
- 打赏
- 举报
我用struts2的时候写过一个这种样子的，我写的是商品的清单，每一种商品后面由一个删除的按钮，点击删除这件商品就会被删除，这一行也会消失。我采用的办法是用一个隐藏的input文本框，把当前商品的信息传到Action，然后后台在数据库里面删除这一件商品，成功之后仍然跳转到之前的页面，但是因为选择删除的那件商品已经被删除了，所以看起来就像那一行直接删除了一样。
你这样子的话可以现在主页写一个循环（tr之前与之后），循环次数为count，count的值取自于session,count默认等于一，这样初始就只有一行，然后“增添”和“删除”按钮分别添加一个动作，到后台处理，增添就是在原有基础上把count++，删除就是把count--，（及的判断是否只剩下一行时提示不能删了），成功以后把新的count值放进session里面，跳转到之前的页面，应该可以实现这个效果。
