jQuery动态表格

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/js/easyui/themes/default/easyui.css" id="swicth-style"/>
<link rel="stylesheet" type="text/css" href="/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/js/easyui/themes/demo.css">
<script type="text/javascript" src="/js/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/customer.js"></script>
</head>
<body>
<p hidden name="session" id = "session"> ${sessionScope.SESSION_USER_ATTR.companyId}</p>
<div style="padding:10px 0 10px 60px">
<form id="entityForm">
<input name="id" id="id" type="hidden" value="${id}">
<table>
<tr>
<td>设备mac:</td>
<td><input class="easyui-validatebox" type="text" id="mac"
name="mac" size="50"
data-options="required:true,validType:['length[1,50]']" /></td>
</tr>
<tr>
<td>时间:</td>
<td><input class="easyui-validatebox" type="text" size="50" id="time" name="time" data-options="required:true"/></td>
</tr>
<tr>
<td>sign:</td>
<td><input class="easyui-validatebox" type="text" size="50" id="sign" name="sign" data-options="required:true"/></td>
</tr>
<tr>
<td>请求的信息:</td>
<td><textarea name="requestData" id="requestData" style="height:80px;400px" data-options="required:true">
[{"name":"Launcher3","packagePath":"com.optima.launcher3","versionCode":2020,"versionName":"1.0.2"}]
</textarea></td>
</tr>
</table>
</form>

</div>
<div style="text-align:center;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">测试</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">清除</a>
</div>
<table id="table1" border="1" >
<tr><td>APP名称</td><td>包名</td><td>版本号</td><td>下载地址</td></tr>
</table>
<!-- <table>
<tr>
<td>APP名称:</td>
<td><input class="easyui-validatebox" type="text" id="mac"
name="mac" size="50"
data-options="required:true,validType:['length[1,50]']" /></td>
</tr>
<tr>
<td>包名:</td>
<td><input class="easyui-validatebox" type="text" size="50" id="time" name="time" data-options="required:true"/></td>
</tr>
<tr>
<td>版本号:</td>
<td><input class="easyui-validatebox" type="text" size="50" id="sign" name="sign" data-options="required:true"/></td>
</tr>
<tr>
<td>返回的信息:</td>
<td><textarea name="requestData" id="requestData" style="height:60px;300px" data-options="required:true"></textarea></td>
</tr>
</table> -->
</body>
<script>
function clearForm(){
$('#entityForm').form('clear');
}
function submitForm(){
if ($("#entityForm").form('enableValidation').form('validate')) {
$.ajax({
cache : false,
type : "POST",
url : '/appsimulation/latestAppUpdate',
data : {
mac : $("#mac").val(),
time : $("#time").val(),
sign : $("#sign").val(),
requestData : $("#requestData").val()
},
async : true,
error : function(request) {
alert("Connection error");
},
success : function(data) {
if (data.success) {
for (var i = 0; i < data.data.length; i++) {
var $table = $('#table1');
var tr = "<tr><td>"+data.data[i].name+"</td><td>"+data.data[i].packagePath+"</td><td>"+data.data[i].versionCode+"</td><td>"+data.data[i].downloadUrl+"</td></tr>";
$table.append(tr);
}    


} else {
alert(data.message);
}
}
});
}    
}

function CreateRow() {
var $table = $('#table1');
var tr = "<tr><td>App名称</td><td>版本号</td><td>包名</td><td>下载地址</td></tr>";
$table.append(tr);
}






</script>
</html>
原文地址:https://www.cnblogs.com/handbang/p/7084206.html