jquery实现动态操作table
充阳秋
使用jquery实现动态创建行、删除行、行内计算、提交表格数据。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="<%=basePath %>/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//删除行
function delRow(goodsId){
$("#tr" + goodsId).remove();
}
//小计
function calcSubTotal(goodsId){
var goodsNumber=$("#goodsNumber"+goodsId).val();
var goodsPrice=$("#goodsPrice"+goodsId).text();
$("#subTotal" + goodsId).text(goodsNumber*goodsPrice);
}
function thingsList(){
window.showModalDialog("<%=basePath %>/manage/things/thingsList", window);
}
//添加行
function addRow(){
var sessionStorage=window.localStorage;
var thingsCount=sessionStorage.getItem("thingsCount");
var thingsJson=JSON.parse(sessionStorage.getItem("selectedInfo"));
for(var i=0;i<thingsCount;i++){
var thingsTemp=thingsJson[i];
if(thingsTemp!=null){
if($("#tr"+thingsTemp.id).length<=0){
$("#table1").append(crearteNewRowStr(thingsTemp.id,thingsTemp.name,thingsTemp.thingsType.name,
thingsTemp.thingsType.id,1,thingsTemp.buyPrice,thingsTemp.buyPrice));
}
}
}
}
function crearteNewRowStr(goodsId,goodsName,goodsType,goodsTypeId,goodsNumber,goodsPrice,goodsSubTotal){
var str="<tbody id=\"tr"+goodsId+"\"><td>"+goodsId+"</td><td id=\"goodsName"+goodsId+"\">"+goodsName+"</td><td>"+goodsType+
"<input type=\"hidden\" id=\"goodsType"+goodsId+"\" value=\""+goodsTypeId+"\"/>"+
"</td><td><input id=\"goodsNumber"+goodsId+"\" type=\"input\" size=\"10\" length=\"2\" value=\""+goodsNumber+
"\"οnchange=\"calcSubTotal('"+goodsId+"')\"/></td><td id=\"goodsPrice"+goodsId+"\">"+goodsPrice+"</td><td id=\"subTotal"+goodsId+"\">"+goodsSubTotal+
"</td><td><input id=\"delBtn\" οnclick=\"delRow('"+ goodsId + "')\" type=\"button\" value=\"删除\" /></td></tbody>"
return str;
}
//提交表格中的数据
function getTableRows(){
var tableRows=$("#goodsTable tbody").length;
if(tableRows<=0){
alert("选购商品列表为空，不可提交！");
return;
}
var goodsIds="";
var goodsNames="";
var goodsTypes="";
var goodsNumbers="";
var goodsPrices="";
for(var i=0;i<tableRows;i++){
var rowStr=$("#goodsTable tbody")[i].innerHTML;
var goodsId=rowStr.substr(rowStr.indexOf("<td>")+4,24);
var goodsName=$("#goodsName"+goodsId).text();
var goodsType=$("#goodsType"+goodsId).val();
var goodsNumber=$("#goodsNumber"+goodsId).val();
var goodsPrice=$("#goodsPrice"+goodsId).text();
goodsIds=goodsIds+goodsId+",";
goodsNames=goodsNames+goodsName+",";
goodsTypes=goodsTypes+goodsType+",";
goodsNumbers=goodsNumbers+goodsNumber+",";
goodsPrices=goodsPrices+goodsPrice+",";
}
var applyReason=$("#applyReason").val();
var remark=$("#remark").val();
$.ajax({
url:"<%=basePath %>/manage/thingsApply/addMyApply",
async : true,
type:"post",
dataType:"json",
data:{"id":goodsIds,"goodsName":goodsNames,"goodsTypeIds":goodsTypes,"applyCountStr":goodsNumbers,
"applyPriceStr":goodsPrices,"applyReason":applyReason,"applyRemark":remark},
success:function(json){
if(json.code==200){
alert("操作成功");
document.getElementById("applyThingsForm").reset();
$("#table1 tbody").remove();
}else if(json.code==0){
}
}
});
}
</script>
</head>
<body>
<form id="applyThingsForm">
<table align="center">
<tr>
<td colspan="4" align="center"><b>采购申请单</b></td>
</tr>
<tr>
<td>采购理由</td>
<td><textarea id="applyReason" name="applyReason"></textarea></td>
<td>备注</td>
<td><textarea id="remark" name="remark"></textarea></td>
</tr>
<tr>
<td><input type="button" οnclick="javascript:thingsList()" value="选择商品" /> </td>
<td><input type="button" οnclick="javascript:getTableRows()" value="提交商品" /></td>
</tr>
</table>
</form>
<hr/>
<table id="goodsTable" border="0" align="center" width="60%">
<thead>
<td>商品编码</td><td>商品名称</td><td>商品分类</td><td>采购数量</td><td>采购单价</td><td>小计</td>
</thead>
</table>
</body>
</html>thingsList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../../../include.jsp"/>
<script type="text/javascript">
var grid;
$(function () {
grid = $('#grid').datagrid({
title: '物品列表(选中行进行物品选则，多选)',
url: sy.contextManagePath + '/things/grid',
striped: true,
rownumbers: true,
pagination: true,
singleSelect: false,
showFooter: false,
pageSize: 20,
pageList: [20],
fit:true,
SelectOnCheck:true,
CheckOnSelect:true,
columns: [
[
{
field: 'ck',
checkbox: true,
},
{
title: '编号',
field: 'uuid'
},
{
title: '名称',
field: 'name'
},
{
title: '分类',
field: 'type',
formatter: function (value, row, index) {
if(row.thingsType==null){
return "";
}
return row.thingsType.name;
}
},
{
title: '状态',
field: 'status'
},
{
title: '采购价钱',
field: 'buyPrice'
},
{
title: '市场价钱',
field: 'marketPrice'
},
{
title: '描述',
field: 'thingsDesc'
}
]
],
toolbar: '#toolbar',
onBeforeLoad: function (param) {
parent.$.messager.progress({
text: '数据加载中....'
});
},
onLoadSuccess: function (data) {
$('.iconImg').attr('src', sy.pixel_0);
parent.$.messager.progress('close');
$(".l-btn-text").css("width","100px");
}
});
});
function selected(){
var rows = $("#grid").datagrid("getSelections");
var storage=window.localStorage;
storage.setItem("selectedInfo", JSON.stringify(rows));
storage.setItem("thingsCount",rows.length);
window.opener.addRow();
window.close();
}
</script>
</head>
<body class="easyui-layout" data-options="fit:true,border:false">
<div id="toolbar" style="display: none;">
<table>
<tr>
<td>
<form id="thingsForm">
<table>
<tr>
<td>名称</td>
<td><input name="thingsName" style="width: 200px;"/></td>
<td>分类</td>
<td>
<select name="type" class="easyui-combobox" style="width: 100%"
data-options="panelHeight:'auto',editable:false">
<option value="">请选择分类</option>
<c:forEach var="thingType" items="${thingsType}">
<option value="${thingType.id}"
<c:if test="${thingType.id eq things.thingsType.id}">
selected="selected"
</c:if>
><spring:message code="${thingType.name}"/>
</option>
</c:forEach>
</select>
</td>
<td>
<a href="javascript:void(0);" class="easyui-linkbutton"
data-options="iconCls:'ext-icon-zoom',plain:true"
οnclick="grid.datagrid('load',sy.serializeObject($('#thingsForm')));">过滤</a>
<a href="javascript:void(0);" class="easyui-linkbutton"
data-options="iconCls:'ext-icon-zoom_out',plain:true"
οnclick="$('#thingsForm input').val('');grid.datagrid('load',{});">重置过滤</a>
<a href="javascript:void(0);" class="easyui-linkbutton"
data-options="iconCls:'iconImg ext-icon-update',plain:true"
οnclick="javascript:selected();">确认选择</a>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</div>
<div data-options="region:'center',fit:true,border:false">
<table id="grid" data-options="fit:true,border:false"></table>
</div>
</body>
</html>
类似资料：