这个页面是一个动态表单页面,里面几乎设计到自己在jsp页面上所用的大部分技术,包含很多jQuery的细节。故此贴出来,以供自己以后查看。
所涉及到的东西有:form表单序列化提交,uploadify插件,动态生成文本框,button等元素,动态生成表单等。
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/inc/AddEditImportJsp.jsp"%>
<html>
<head>
<title><fmt:message key="enEnroll.addedit.jsp.title" />
title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/js/uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/uploadify/jquery.uploadify.js">script>
<script type="text/javascript">
$(function () {
var projectId="${enProjectDomain.id }";
jQuery(".file_upload").each(function() {
var fileInput=$(this);
var fileInputId=fileInput.attr("id");
var contentInputId=fileInputId.replace("file","content");
var textoneInputId=fileInputId.replace("file","textone");
var contentInput=$("input[name=content][id^="+contentInputId+"]");
var textoneInput=$("input[name=textone][id^="+textoneInputId+"]");
jQuery(this).uploadify({
swf : '${pageContext.request.contextPath}/resources/js/uploadify/uploadify.swf',
uploader : '${pageContext.request.contextPath}/enroll/enEnroll/uploaderFile/'+projectId,
'method' : 'post',
'auto' : false,
'multi' : false,
'buttonText' : '选择文件' ,
'fileObjName':'file',
'fileSizeLimit':'2MB',
'queueSizeLimit' : 1,
'onSelect' : function(file) {
//contentInput.val(file.name);
$("#fileSizeInput").val(parseInt($("#fileSizeInput").val())+1);
textoneInput.val(file.name); //文件原名
},
'onCancel' : function(file) {
contentInput.val('');
textoneInput.val('');
$("#fileSizeInput").val(parseInt($("#fileSizeInput").val())-1);
},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert_dialog("最多上传一个文件!");
break;
case -110:
alert_dialog("文件 ["+file.name+"] 大小超出系统限制的2M大小!");
break;
case -120:
alert_dialog("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert_dialog("文件 ["+file.name+"] 类型不正确!");
break;
}
},
'onUploadSuccess' : function(file, data, response) {
contentInput.val(data); //修改后文件名
$("#fileUploadSuccessSizeInput").val(parseInt($("#fileUploadSuccessSizeInput").val())+1);
//fileSize=fileSize+1;
if(parseInt($("#fileUploadSuccessSizeInput").val())==parseInt($("#fileSizeInput").val())){
//console.info(fileSize);
//序列化form表单
var jsonStr = $("#enrollFormId").serializeObject();
// console.info(jsonStr);
//提交
$.ajax({
url : "${pageContext.request.contextPath}/enroll/enEnroll/saveList",
type : "POST",
cache:false,
async:false,
data : {
enApplycontentDomains : jsonStr
},
success : function(data) {
if(data=='ok'){
tips_dialog("新增成功", 2, function(){
window.location.href="${pageContext.request.contextPath}/enroll/enEnroll/doSelectQuery";
} );
}else{
tips_dialog("新增失败", 2, null);
}
}
});
}
}
});
});
//radio 操作
$("input:radio[name^=radioInput_]").change(function () {
//单选赋值到隐藏域
var contentRadio=$(this.parentNode).find("input[name=content]")[0];
$(contentRadio).val($(this).val());
});
//checkbox 操作
$("input:checkbox[name^=checkBoxInput_]").change(function () {
//当前点击对象所在的checkBox组中已选中的值
var checkBoxs=$(this.parentNode).find("input[type=checkbox]:checked'");
var contentCheckBox=$(this.parentNode).find("input[name=content]")[0];
//拼接复选框的值
var contentValue="";
$(checkBoxs).each(function(){
contentValue=contentValue+$(this).val()+";";
});
//去掉最后一个分号
if(contentValue.indexOf(";")>0){
contentValue=contentValue.substring(0,contentValue.length-1);
}
$(contentCheckBox).val(contentValue);
});
});
//form表单序列化
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = [this.value || ''];
}
});
return JSON.stringify(o);
};
//表单提交
function doform() {
//清除必填/必选红色提示
var requiredSpan=$("span[id^=requiredSpan_]");
for(var i=0;i"" );
}
if (jQuery("#enrollFormId").valid()){
//判断必填项是否填写
var ischeck=true;
//验证必填项是否填写
var contentInputs=$(":input[name=content]");
for(var i=0;i//获取当前Input对象
var contentInput=$(contentInputs[i]);
var contentId=contentInput.attr("id");
if(contentId.split("_").length==4){
//获取是否为空
var isnullable=contentId.split("_")[3];
if(isnullable==1){
//不允许为空
var contentValue=contentInput.val();
var parentSpan=$(contentInput[0].parentNode);
if(contentValue==null||contentValue==''){
parentSpan.siblings().html("必填/必选");
ischeck=false;
}
}
}
}
var scoreContentInputs=$(":input[name=scoreContent]");
for(var i=0;ivar scoreContentInput=$(scoreContentInputs[i]);
var scoreContentTr=$(scoreContentInput.closest("tr"));
var scoreContentValue=scoreContentInput.val();
var tipSpan=scoreContentTr.find("span").last();
//如果是数字
if(scoreContentValue!=null&&scoreContentValue!='')
{
if(isNaN(scoreContentValue)){
tipSpan.html("必须为数字");
ischeck=false;
}
}else{
var isnullable=scoreContentTr.attr("id").split("_")[2];
if(isnullable==0){
//不允许为空
tipSpan.html("必填");
ischeck=false;
}
}
}
//判断文件必上传项是否已上传
var textoneInputs=$("input[name=textone][id^=textone_]");
for(var i=0;ivar textoneInput=$(textoneInputs[i]);
var textoneInputArray=textoneInput.attr("id").split("_");
//console.info(textoneInputArray);
if(textoneInputArray.length>=5)
{
//文件类型,必须上传
if(textoneInputArray[4]==7&&textoneInputArray[3]==1)
{
var textoneInputValue=textoneInput.val();
if(textoneInputValue==null||textoneInputValue==''){
var tipSpan=$("span[id=requiredSpan_"+textoneInputArray[1]+"_"+textoneInputArray[2]+"]");
tipSpan.html("必选");
ischeck=false;
}
}
}
}
//如果有未填写的必填项,返回
if(!ischeck){
return;
}
if(parseInt($("#fileSizeInput").val())==0){
//序列化form表单
var jsonStr = $("#enrollFormId").serializeObject();
//提交
$.ajax({
url : "${pageContext.request.contextPath}/enroll/enEnroll/saveList",
type : "POST",
cache:"false",
data : {
enApplycontentDomains : jsonStr
},
success : function(data) {
if(data=='ok'){
tips_dialog("操作成功", 2, function(){
window.location.href="${pageContext.request.contextPath}/enroll/enEnroll/doSelectQuery";
} );
}else{
tips_dialog("操作失败", 2, null);
}
}
});
}else{
//文件上传
$(".uploadify[id^=file_]").each(function() {
$(this).uploadify('upload','*');
});
}
}
}
//取消按钮
function docancel(){
window.location.href="${pageContext.request.contextPath}/enroll/enEnroll/doSelectQuery";
}
//多次填写按钮
function doMultipleReport(obj)
{
var tableRepeat = $(obj).closest("table");
var tableClone = tableRepeat.clone();
//移除多次填报按钮
tableClone.find("button").remove();
//移除其中script代码,否则会重新创建元素节点
tableClone.find("script").remove();
//添加删除当前节点按钮
var buttonDiv = tableClone.find("span[id^=multReportDiv_]");
buttonDiv.html('');
//时间戳
var timestamp = (new Date()).valueOf();
//修改radio的name属性
var radioInputs = tableClone.find("input:radio[name^=radioInput_]");
for ( var i = 0; i < radioInputs.length; i++)
{
$(radioInputs[i]).attr("name",$(radioInputs[i]).attr("name") + "_" + timestamp);
}
//添加绑定事件
tableClone.delegate("input:radio[name^=radioInput_]", "change",function() {
var contentRadio = $(this.parentNode).find("input[name=content]")[0];
$(contentRadio).val($(this).val());
});
//修改checkbox的那么属性
var checkBoxInputs = tableClone.find("input:checkbox[name^=checkBoxInput_]");
for ( var i = 0; i < checkBoxInputs.length; i++)
{
$(checkBoxInputs[i]).attr("name",$(checkBoxInputs[i]).attr("name") + "_" + timestamp);
}
//添加绑定事件
tableClone.delegate("input:checkbox[name^=checkBoxInput_]", "change",function() {
//当前点击对象所在的checkBox组中已选中的值
var checkBoxs = $(this.parentNode).find("input[type=checkbox]:checked'");
var contentCheckBox = $(this.parentNode).find("input[name=content]")[0];
//拼接复选框的值
var contentValue = "";
$(checkBoxs).each(function() {
contentValue = contentValue + $(this).val() + ";";
});
//去掉最后一个分号
if (contentValue.indexOf(";") > 0) {
contentValue = contentValue.substring(0,contentValue.length - 1);
}
$(contentCheckBox).val(contentValue);
});
//绑定复写表单上传文件事件
var tabletextoneInputs=tableClone.find("input[name=textone]");
for(var i=0;i"id",$(tabletextoneInputs[i]).attr("id") + "_" + timestamp);
}
var fileInputs = tableClone.find("div[id^=file_][class=uploadify]");
var projectId="${enProjectDomain.id }";
for ( var i = 0; i < fileInputs.length; i++)
{
var fileSpan=$(fileInputs[i]).closest("span");
tableClone.find("div[id^=file_]").remove();
var fileInputId=fileSpan.attr("id").replace("span","file")+"_"+timestamp;
fileSpan.append('');
//console.info(tableClone.find("input[name=textone]"));
}
tableRepeat.after(tableClone);
//文件上传插件初始化
var tablefileInputs=tableClone.find("[input[name=file]");
for(var i=0;ivar tablefileInput=$(tablefileInputs[i]);
var fileInputIdArr=tablefileInput.attr("id").split("_");
var fileInputId=fileInputIdArr[0]+"_"+fileInputIdArr[1]+"_"+fileInputIdArr[2];
//寻找隐藏域,用来存储文件保存名
var contentInputId=fileInputId.replace("file","content");
var contentInput=tableClone.find("input[name=content][id^="+contentInputId+"]");
var textoneInputId=fileInputId.replace("file","textone");
var textoneInput=$("input[name=textone][id^="+textoneInputId+"][id$=_"+timestamp+"]");
tablefileInput.uploadify({
swf : '${pageContext.request.contextPath}/resources/js/uploadify/uploadify.swf',
uploader : '${pageContext.request.contextPath}/enroll/enEnroll/uploaderFile/'+projectId,
'method' : 'post',
'auto' : false,
'multi' : false,
'buttonText' : '选择文件' ,
'fileObjName':'file',
'fileSizeLimit':'2MB',
'queueSizeLimit' : 1,
'onSelect' : function(file) {
//contentInput.val(file.name);
$("#fileSizeInput").val(parseInt($("#fileSizeInput").val())+1);
textoneInput.val(file.name); //文件原名
},
'onCancel' : function(file) {
contentInput.val('');
textoneInput.val('');
$("#fileSizeInput").val(parseInt($("#fileSizeInput").val())-1);
},
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert_dialog("最多上传一个文件!");
break;
case -110:
alert_dialog("文件 ["+file.name+"] 大小超出系统限制的2M大小!");
break;
case -120:
alert_dialog("文件 ["+file.name+"] 大小异常!");
break;
case -130:
alert_dialog("文件 ["+file.name+"] 类型不正确!");
break;
}
},
'onUploadSuccess' : function(file, data, response) {
contentInput.val(data); //修改后文件名
//fileSize=fileSize+1;
$("#fileUploadSuccessSizeInput").val(parseInt($("#fileUploadSuccessSizeInput").val())+1);
if(parseInt($("#fileUploadSuccessSizeInput").val())==parseInt($("#fileSizeInput").val())){
//序列化form表单
var jsonStr = $("#enrollFormId").serializeObject();
//提交
$.ajax({
url : "${pageContext.request.contextPath}/enroll/enEnroll/saveList",
type : "POST",
cache:false,
async:false,
data : {
enApplycontentDomains : jsonStr
},
success : function(data) {
if(data=='ok'){
tips_dialog("新增成功", 2, function(){
window.location.href="${pageContext.request.contextPath}/enroll/enEnroll/doSelectQuery";
} );
}else{
tips_dialog("新增失败", 2, null);
}
}
});
}
}
});
}
//tableClone.find("[input[name=file]")
}
//删除当前的表单
function doMultReportDelete(obj) {
var tableNow = $(obj).closest("table");
tableNow.remove();
}
// 页面装载后的操作
$().ready(function() {
//验证基本信息
var validator = jQuery("#enrollFormId").validate({
rules : {
"studentname" : {
required : true,
maxlength : 20
},
"sex" : {
required : true,
maxlength : 2
},
"studentparent" : {
required : true,
maxlength : 20
},
"studentlink" : {
isMobile : true,
required : true,
maxlength : 20
},
"studentage" : {
digits : true,
required : true,
maxlength : 2
}
},
messages : {
}
});
});
script>
<style>
.content_style{
position:relative;
margin-top:20px;
margin-left:20px;
width:800px;
min-height:600px;
}
.content_style .toolbar_style{
font-size: 20px;
background: #edf1fa;
height: 40px;
}
style>
head>
<body>
<div id="content" class="content_style" style="width: 90%" >
<input type="hidden" id="fileSizeInput" value="0" />
<input type="hidden" id="fileUploadSuccessSizeInput" value="0" />
<div id="toolbar" class="toolbar_style"><span>${enProjectDomain.name}>>新增学生信息span>div>
<div id="viewContent">
<form id="enrollFormId" method="post">
<input type="hidden" name="projectId" value="${enProjectDomain.id }" />
<table width="90%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="lesta" colspan="2" style="text-align: center;background-color: #FFFFE7;">报名基础信息td>
tr>
<tr>
<td class="lesta-35"><span style="color:red">*span>学生姓名:td>
<td class="lestb"><input type="text" maxlength="20" name="studentname"/>td>
tr>
<tr>
<td class="lesta-35"><span style="color:red">*span>年龄:td>
<td class="lestb"><input type="text" maxlength="2" name="studentage"/>td>
tr>
<tr>
<td class="lesta-35"><span style="color:red">*span>学生性别:td>
<td class="lestb">
<cus:CheckOrRadioBoxTag name="studentsex" id="studentsex" codeType="9100" />
td>
tr>
<tr>
<td class="lesta-35"><span style="color:red">*span>家长姓名:td>
<td class="lestb"><input type="text" name="studentparent" maxlength="20" />td>
tr>
<tr>
<td class="lesta-35"><span style="color:red">*span>联系方式:td>
<td class="lestb"><input maxlength="11" type="text" name="studentlink"/>td>
tr>
table>
<div style="position:relative; overflow:auto">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="lesta" colspan="2" style="text-align: center;background-color: #FFFFE7;">成绩信息td>
tr>
<tr>
<td colspan="2">
<div id="scoreDiv">
<table id="scoreTable" class="its">
<thead>
<tr>
<th>考试名称/科目th>
<c:forEach items="${enProjectDomain.enScoreSubjectList }" var="subject">
<th><div style="width:100px;text-overflow:ellipsis; overflow:hidden;white-space:nowrap " title="${subject.name }">${subject.name }div>th>
c:forEach>
tr>
thead>
<tbody>
<c:forEach items="${enProjectDomain.enScoreExamList}" var="exam" varStatus="examloop">
<tr class="odd" id="examScore_${examloop.index }_${exam.nullable }">
<td>
<div style="width:170px;text-overflow:ellipsis; overflow:hidden;white-space:nowrap;float: left;" title="${exam.name }">
<c:if test="${exam.nullable==0 }">
<span style="color:red">*span>
c:if>
${exam.name}
div>
<span id="requiredSpan_exam_${examloop.index }" style="color: red;margin-left: 15px;float: left;">span>
td>
<c:forEach items="${enProjectDomain.enScoreSubjectList }" var="subject">
<td id="content">
<input type="hidden" name="subjectId" value="${subject.id }"/>
<input type="hidden" name="examId" value="${exam.id }"/>
<input type="text" maxlength="10" name="scoreContent"/>
td>
c:forEach>
tr>
c:forEach>
tbody>
table>
div>
td>
tr>
table>
div>
<c:forEach items="${enProjectDomain.enAppStructList }" var="enApplystructDomain" varStatus="structStatus">
<c:if test="${fn:length(enApplystructDomain.enAppPropertyDomains)>0}">
<div id="tableDiv_${structStatus.index }">
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tr>
<td class="lesta" nowrap="nowrap" colspan="2" style="text-align: center;background-color: #FFFFE7;">${enApplystructDomain.tablename }
<c:if test="${enApplystructDomain.isunique==0 }">
<span id="multReportDiv_${structStatus.index }" class="aui_buttons" style="background:none;border-top:none;">
<button id="multReportBtn_${structStatus.index }" class="aui_state_highlight" style="margin-left: 0px;" onclick="doMultipleReport(this);" type="button">多次填报button>
span> c:if>
td>
tr>
<tbody>
<c:forEach items="${enApplystructDomain.enAppPropertyDomains }" var="enAppPropertyDomain" varStatus="propertyStatus">
<input type="hidden" name="propertyid" value="${enAppPropertyDomain.id }"/>
<input type="hidden" id="textone_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }_${enAppPropertyDomain.type }" name="textone" value=""/>
<c:choose>
<c:when test="${enAppPropertyDomain.type==1 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="td__${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }">
<input type="text" name="content" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" maxlength="${enAppPropertyDomain.maxLength }"/>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==2 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="td__${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }" >
<textarea style="width: 80%;" name="content" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" maxlength="${enAppPropertyDomain.maxLength }">textarea>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==3 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="td__${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }">
<select id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" name="content">select>
<script>
var optioncontent="${enAppPropertyDomain.optioncontent}";
var select_value_list=$(optioncontent.split(";"));
var sel=$("#content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }");
sel.append('+"请选择"+'');
for(var i=0;i' +select_value_list[i]+'');
}
script>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==4 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="td__${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }">
<input type="text" name="content" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" class="Wdate" readonly="readonly" placeholder="搜索起始日期" onfocus="WdatePicker()"/>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==5 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="radioTd_${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }">
<input type="hidden" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" name="content" value=""/>
<script>
var optioncontent="${enAppPropertyDomain.optioncontent}";
var radio_value_list=$(optioncontent.split(";"));
var radioSpan=$("#span_${structStatus.index }_${propertyStatus.index }");
var radioName="radioInput_${structStatus.index }_${propertyStatus.index }";
for(var i=0;i''" value="' +radio_value_list[i]+'"/>'+radio_value_list[i]+' ');
}
script>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==6 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="checkBoxTd_${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }">
<input type="hidden" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }" name="content" value=""/>
<script>
var optioncontent="${enAppPropertyDomain.optioncontent}";
var checkBox_value_list=$(optioncontent.split(";"));
var checkBoxSpan=$("#span_${structStatus.index }_${propertyStatus.index }");
var checkBoxName="checkBoxInput_${structStatus.index }_${propertyStatus.index }";
for(var i=0;i''" value="' +checkBox_value_list[i]+'"/>'+checkBox_value_list[i]);
}
script>
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;">span>
td>
tr>
c:when>
<c:when test="${enAppPropertyDomain.type==7 }">
<tr>
<td class="lesta-35">
<c:if test="${enAppPropertyDomain.nullable==1 }"><span style="color:red">*span>c:if>
${enAppPropertyDomain.name }:
td>
<td class="lestb" id="fileUpload_${structStatus.index }_${propertyStatus.index }">
<span id="span_${structStatus.index }_${propertyStatus.index }" style="float: left;">
<input type="hidden" id="content_${structStatus.index }_${propertyStatus.index }_${enAppPropertyDomain.nullable }_${enAppPropertyDomain.type }" name="content" value=""/>
<input type="file" class="file_upload" name="file" id="file_${structStatus.index }_${propertyStatus.index }" />
span>
<span id="requiredSpan_${structStatus.index }_${propertyStatus.index }" style="color: red;margin-left: 20px;float: left;">span>
td>
tr>
c:when>
c:choose>
c:forEach>
tbody>
table>
div>
c:if>
c:forEach>
form>
<div id="footbar" style="text-align: center;height: 60px;margin-top: 20px;">
<input type="button" id="saveButton" style="width: 60px;height: 30px;cursor: pointer;background: #00B8FF;border-radius: 5px;border: none;" value="保存" onclick="doform();"/>
<input type="button" id="cancelButton" style="margin-left: 20px;width: 60px;height: 30px;cursor: pointer;background: #00B8FF;border-radius: 5px;border: none;" value="取消" onclick="docancel();"/>
div>
div>
div>
body>
html>