双向表-页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/index2.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form action="long" method="post">
<input type="button" value="新增" onclick="add()">
订购日期:<input type="text" name="ctime1" value="${ctime1}">-<input type="text" name="ctime2" value="${ctime2}">
请购单号:<input type="text" name="cqid" value="${cqid}"><br>
联系人:<input type="text" name="cname" value="${cname}">
电话:<input type="text" name="ctel" value="${ctel}">
</form>
<table>
<tr>
<th>订购编号</th>
<th>订购日期</th>
<th>请购单号</th>
<th>联系人</th>
<th>电话</th>
<th>操作</th>
</tr>
<c:forEach items="${info.list }" var="m">
<tr>
<td>${m.id }</td>
<td><fmt:formatDate value="${m.time}" pattern="yyyy-MM-dd"/></td>
<td>${m.qid }</td>
<td>${m.name }</td>
<td>${m.tel }</td>
<td>
<input type="button" value="修改">
<input type="button" value="删除">
</td>
</tr>
</c:forEach>

</table>
<a href="long?pageNum=1">首页</a>
<a href="long?pageNum=${info.pageNum-1 }">上一页</a>
<a href="long?pageNum=${info.pageNum+1 }">下一页</a>
<a href="long?pageNum=${info.pages }">尾页</a>
</body>
<script type="text/javascript">

function add(){
location = "/add";
}

</script>
</html>

----------------------------------------------------

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加列表</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/css/index2.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form action="/addmingxi" method="post">
<table>
<tr>
<td>订购编号</td>
<td>
<input type="text" name="id">
</td>
</tr>
<tr>
<td>订购时间</td>
<td>
<input type="date" name="time">
</td>
</tr>
<tr>
<td>请购单号</td>
<td>
<input type="text" name="qid">
</td>
</tr>
<tr>
<td>联系人</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>电话</td>
<td>
<input type="text" name="tel">
</td>
</tr>
</table>


<table id="table" class="table-bordered">
<tr>
<td><input type='checkbox' class='ch'></td>
<td>物料编号</td>
<td>物料名称</td>
<td>物料规格</td>
<td>单位</td>
<td>单价</td>
<td>备注</td>
<td>操作

<input type="button" value="添加" onclick="add()">
<input type="button" value="删除" onclick="del()">
<input type="button" value="修改" onclick="update()">
</td>

</tr>

</table>
<input type="submit" value="提交">

</form>
</body>
<script type="text/javascript">
function add(){
var str = "<tr>"+
"<td><input type='checkbox' class='ch'></td>"+
"<td><input type='text' name='id'> </td>"+
"<td><input type='text' name='name'> </td>"+
"<td><input type='text' name='guige'> </td>"+
"<td><input type='text' name='danwei'> </td>"+
"<td><input type='text' name='price'> </td>"+
"<td><input type='text' name='beizhu'> </td>"+

"</tr>"

$("#table").append(str);
}

function del(){
var s = $(".ch:checked").parent();
var ss = $(s).parent();
ss.html("")
}

function update(){
if($(".ch:checked").val()!=1){
var s = $(".ch:checked").parent();
var ss = $(s).parent();
ss.html("")
var str =
"<td><input type='checkbox' class='ch' value='1'></td>"+
"<td><input type='text' name='id'> </td>"+
"<td><input type='text' name='name'> </td>"+
"<td><input type='text' name='guige'> </td>"+
"<td><input type='text' name='danwei'> </td>"+
"<td><input type='text' name='price'> </td>"+
"<td><input type='text' name='beizhu'> </td>"
$(ss).append(str);
}else{
$("input[name=id]").attr("readonly","false");
$("input[name=name]").attr("readonly","false");
$("input[name=guige]").attr("readonly","false");
$("input[name=danwei]").attr("readonly","false");
$("input[name=price]").attr("readonly","false");
$("input[name=beizhu]").attr("readonly","false");
$(".ch:checked").val("")

}



}

</script>
</html>

原文地址:https://www.cnblogs.com/liuzhaolong/p/12971381.html