您的位置：首页 > Web前端 > JavaScript

jsp表格实现增加删除功能

2018-03-07 11:52 197 查看

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">

//对行的删除和增加
//行的数字也要实现同步增加和删除

$(function () {

var i;
$("#addFile").click(function(){
//获取行数
var row =($("#tableid").find("tr").length-1)/2;
//要添加的行
i=row+1;
$(this).parent().parent().before("<tr class= 'file'><td>file"
+i+":</td><td><input type='file' name='file"
+i+"'/></td></tr><tr class='desc'><td>desc"
+i+":</td><td><input type='text' name='desc"
+i+"'/><button id='delete"
+i+"' type='button'>删除</button></td></tr>");

i++;

//删除两行
$("#delete"+(i-1)).click(function(){

var $tr = $(this).parent().parent();
$tr.prev("tr").remove();
$tr.remove();

//重新排序
$(".file").each(function(index){
//alert(index);
var n =index+1;
$(this).find("td:first").text("file"+n);
$(this).find("td:last input").attr("name","file"+n);

});

$(".desc").each(function(index){
var x =index+1;
//alert("x="+x);
$(this).find("td:first").text("desc"+x);
$(this).find("td:last input").attr("name","desc"+x);
$(this).find("td:last button").attr("id","delete"+x);
});

});
})
})

</script>
</head>

<body>

<form action="uploadServlet" method="post" enctype="multipart/form-data">
<input type="hidden" id="fileNum" name="fileNum" value="1">
<table id = tableid>
<tr class= file>
<td>file1:</td>
<td><input type="file" name="file1" /></td>
</tr>

<tr class= desc>
<td>desc1:</td>
<td><input type="text" name="desc1" /></td>
</tr>

<tr >
<td><input id="submit" type="submit" value="提交 "></td>
<td><button id="addFile" type="button">新增一个附件</button></td>
</tr>
</table >
</form>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航