js 克隆行示例

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="/Financing/js/gen_validator.js"></script>
	<script type="text/javascript" src="/Financing/js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="/Financing/js/dateFormat.js"> </script> 
	<script type="text/javascript" src="/Financing/My97DatePicker/WdatePicker.js"> </script> 
	
	<LINK href="/Financing/css/my.css" type=text/css rel=stylesheet>
	<LINK href="/Financing/css/financing.css" type=text/css rel=stylesheet>
  </head>
  
  <body>
  
  	<br><center>
    <form id="recordForm" name="recordForm" action="/Financing/insertRecord.action" method="post">
<!--    <s:token/>-->
    <table style="width:800px;">
    <tr><td style="text-align:center;"><h3>记录收支款项</h3></td></tr>
    <tr><td style="text-align:right;">
    	<input type="button" value="增加行" onclick="addRow()"/>&nbsp;
    	<input type="button" value="删除行" onclick="deleteRow()"/>&nbsp;
    	<input type="submit" value="记录款项"/>
    </td></tr>
    </table>
    <table class="list" id="list">
   		<tr>
	   		<td>金额</td><td>类型</td><td>分类</td><td>卡号</td><td>摘要</td><td>发生时间</td><td>记录人</td>
   		</tr>
   		<tr name="row1" id="row1">
	   		<td><input type="text" name="money" style="width:100px;"
	   			onkeyup="this.value=this.value.replace(/[^\d\.]/g,'')" 
	   			onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'')" 
	   			style="ime-mode:Disabled"/>&nbsp;元</td>
	   		<td>
	   			<select name="recordType" style="width:50px;">
	   				<c:forEach var="shouzhi" items="${shouzhi}">
	   				<option value="${shouzhi.codeValue}">${shouzhi.codeName}</option>
	   				</c:forEach>
	   			</select>
	   		</td>
	   		<td>
	   		    	<!-- Map 取值方式 -->
	   			<%--<select name="codeType" style="width:50px;">
	   				<c:forEach var="fenlei" items="${fenlei}">
	   				<option value="${fenlei.value.codeValue}">${fenlei.key}</option>
	   				</c:forEach>
	   			</select>--%>
	   			<select name="codeType" style="width:50px;">
	   				<c:forEach var="fenlei" items="${fenlei}">
	   					<option value="${fenlei.codeValue}">${fenlei.codeName}</option>
	   				</c:forEach>
	   			</select>
	   		</td>
	   		<td>
	   			<select name="cardId">
		   			<c:forEach var="zhanghu" items="${zhanghu}">
		   				<option value="${zhanghu.id}">${zhanghu.cardName}</option>
	   				</c:forEach>
	   			</select>
	   		</td>
	   		<td><input type="text" name="remark"/></td>
	   		<td><input type="text" name="happenDate" id="date" onClick="WdatePicker()" style="width:100px;"/></td>
	   		<td>
	   			<input type="text" name="recorder" value="${session.users.userName}" style="width:50px;" disabled="disabled"/>
	   			<input type="hidden" name="recorderId" value="${session.users.id}"/>
	   		</td>
   		</tr>
    </table>
    </form>
    </center>
  </body>
  <c:if test="${requestScope.message != null}"><script>alert('${requestScope.message}');</script></c:if>
</html>
<script language="JavaScript">
//克隆表格的行
var i=1;
function addRow()
{
	++i;
	var newTR = row1.cloneNode(true);
	newTR.id="row"+i;
	newTR.name="row"+i;
	row1.parentNode.insertAdjacentElement("beforeEnd",newTR);
}
function deleteRow()
{
	var tab = document.getElementById('list');
	if(tab.rows.length > 2)
	{
		tab.deleteRow(tab.rows.length-1);
	}
	else
	{
		alert("已经剩下最后一行,不能删除!");
	}
}
</script>


<script type="text/javascript">
$(function() 
{
	var date = new Date();
	document.getElementById('date').value=(new Date()).Format("yyyy-MM-dd");
});

var formValidator = new Validator('recordForm');
formValidator.addValidation("money","req","金额不能为空!");
formValidator.addValidation("happenDate","req","发生时间不能为空!");
</script>

 

你可能感兴趣的:(JavaScript,C++,c,css,C#)