jquery实现动态操作table
来源：互联网 发布：股票那个软件最好 编辑：程序博客网 时间：2024/05/19 00:13
使用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+"\"onchange=\"calcSubTotal('"+goodsId+"')\"/></td><td id=\"goodsPrice"+goodsId+"\">"+goodsPrice+"</td><td id=\"subTotal"+goodsId+"\">"+goodsSubTotal+"</td><td><input id=\"delBtn\" onclick=\"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" onclick="javascript:thingsList()" value="选择商品" /> </td> <td><input type="button" onclick="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" onclick="grid.datagrid('load',sy.serializeObject($('#thingsForm')));">过滤</a> <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'ext-icon-zoom_out',plain:true" onclick="$('#thingsForm input').val('');grid.datagrid('load',{});">重置过滤</a> <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'iconImg ext-icon-update',plain:true" onclick="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> 1 0
- jquery实现动态操作table
- jquery动态操作table
- JQuery操作动态操作Table
- Jquery动态操作table表格
- Jquery之动态操作table
- jquery操作table操作
- jquery动态创建table
- jquery 动态table
- Jquery动态生成table
- jquery动态创建table
- jQuery实现动态添加tr到table的方法
- JQuery动态实现table行自增自减
- Jquery操作table总结
- JQuery操作table
- jquery table操作
- JQuery 操作/获取 table
- jQuery table 操作
- jquery 操作table
- 计算机中英文数
- 产品好做吗-不好做！！！
- YII2 ActiveForm表单回显详解
- 嵌入式程序猿必知的3个的C语言技巧
- oracle创建表+注释
- jquery实现动态操作table
- Android 点击通知栏消息 跳转到指定的Fragment界面
- JQuery.dataTables免费开源的数据表格插件
- 第十一章 连接查询和分组查询
- 文件调用-JSP中include指令和include行为区别
- ARM 中断--IRQ and FIQ配置--外部配置
- usaco1.1.4 Broken Necklace
- IBM Rational AppScan使用详细说明
- # CRF++源码分析——模型的加载#
