实例介绍
【实例简介】
【实例截图】
【核心代码】
【实例截图】
【核心代码】
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ASP.NET_07.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js"></script>
<style>
.tb1
{
width:100%;
border:1px solid #000;
border-collapse:collapse;
}
.tb1 th
{
border:1px solid #000;
height:35px;
}
.tb1 td
{
border:1px solid #000;
height:30px;
text-align:center;
}
</style>
<script>
$(function () {
$("#btnAdd").click(function () {
addData();
});
$("#btnUpdate").click(function () {
UpdateData();
});
$("#btnSave").click(function () {
//获取表格所有数据
GetData();
$.ajax({
url: "DataPage.aspx",
data: {
info: $("#txtData").val()
},
success: function (data) {
alert(data);
}
});
});
});
//添加内容
function addData() {
var goodsName = $("#txtGoodsName").val();
var unit = $("#txtUnit").val();
var num = $("#txtNum").val();
var price = $("#txtPrice").val();
var countPrice = (num * 1) * (price * 1);
var memo = $("#txtMemo").val();
var str = "<tr><td>" goodsName "</td><td>" unit "</td><td>" num "</td><td>" price "</td><td>" countPrice "</td><td>" memo "</td><td><a href='###' onclick='GetRowData(this)'>编辑</a> <a href='###' onclick='DelRow(this)'>删除</a></td></tr>";
$("#table1").append(str);
// $(str).insertBefore($("#table1").find("tr").last());
ClearData();
}
function ClearData() {
$("#txtGoodsName").val("");
$("#txtUnit").val("");
$("#txtNum").val("");
$("#txtPrice").val("");
$("#txtMemo").val("");
}
//获取数据(修改)
function GetRowData(obj) {
var goodsName = $(obj).parent().parent().find("td").eq(0).text();
var unit = $(obj).parent().parent().find("td").eq(1).text();
var num = $(obj).parent().parent().find("td").eq(2).text();
var price = $(obj).parent().parent().find("td").eq(3).text();
var memo = $(obj).parent().parent().find("td").eq(5).text();
var index = $(obj).parent().parent().index();
$("#txtGoodsName").val(goodsName);
$("#txtUnit").val(unit);
$("#txtNum").val(num);
$("#txtPrice").val(price);
$("#txtMemo").val(memo);
$("#txtIndex").val(index);
}
//修改数据，放会TABLE
function UpdateData() {
if ($("#txtIndex").val() == "") {
alert("请选择要修改的数据");
} else {
var goodsName = $("#txtGoodsName").val();
var unit = $("#txtUnit").val();
var num = $("#txtNum").val();
var price = $("#txtPrice").val();
var countPrice = (num * 1) * (price * 1);
var memo = $("#txtMemo").val();
var tb1 = $("#table1");
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(0).text(goodsName);
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(1).text(unit);
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(2).text(num);
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(3).text(price);
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(4).text(countPrice);
tb1.find("tr").eq($("#txtIndex").val()).find("td").eq(5).text(memo);
$("#txtIndex").val("");
ClearData();
}
}
//删除数据
function DelRow(obj) {
if (confirm("是否删除【" $(obj).parent().parent().find("td").eq(0).text() "】？")) {
$(obj).parent().parent().remove();
}
}
//获取整个表格数据，存入数据库
function GetData() {
var str = "";
$("#table1").find("tr").each(function () {
if ($(this).index() != 0) {
str = $(this).find("td").eq(0).text() "^" $(this).find("td").eq(1).text() "^" $(this).find("td").eq(2).text() "^" $(this).find("td").eq(3).text() "^" $(this).find("td").eq(4).text() "^" $(this).find("td").eq(5).text() "±";
}
});
$("#txtData").val(str);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="hidden" id="txtData" />
<input type="hidden" id="txtIndex" />
<table style=" width:70%">
<tr>
<td colspan="4" style="text-align:right">No:00001</td>
</tr>
<tr>
<th colspan="4"><font style="font-size:25px">采购申请单</font></th>
</tr>
<tr>
<td style="width:100px; font-weight:bold">采购部门：</td>
<td><asp:Label ID="labDeptName" runat="server" Text="研发部"></asp:Label></td>
<td style=" width:100px;font-weight:bold">申请日期：</td>
<td ><asp:Label ID="labYear" runat="server"></asp:Label>年
<asp:Label ID="labMonth" runat="server"></asp:Label>月
<asp:Label ID="labDay" runat="server"></asp:Label>日
</td>
</tr>
<tr>
<td colspan="4">
<table class="tb1" id="table1">
<tr>
<th style="width:18%">物品名称</th>
<th style="width:8%">单位</th>
<th style="width:8%">数量</th>
<th style="width:10%">单价</th>
<th style="width:15%">金额</th>
<th style="width:30%">备注</th>
<th>操作</th>
</tr>
</table>
</td>
</tr>
</table>
物品名称： <asp:TextBox ID="txtGoodsName" runat="server"></asp:TextBox><br/>
单位： <asp:TextBox ID="txtUnit" runat="server"></asp:TextBox><br/>
数量： <asp:TextBox ID="txtNum" runat="server"></asp:TextBox><br/>
单价： <asp:TextBox ID="txtPrice" runat="server"></asp:TextBox><br/>
备注： <asp:TextBox ID="txtMemo" runat="server"></asp:TextBox><br/>
<input id="btnAdd" type="button" value="添加" />
<input id="btnUpdate" type="button" value="修改" />
<input id="btnSave" type="button" value="保存数据库" />
</div>
</form>
</body>
</html>
标签： Ajax
好例子网口号：伸出你的我的手 — 分享！
网友评论
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)