这是运行图片
这是前台页面
03.aspx页面
复制代码
代码如下:
<table
id="MyTable"
cellspacing="1"
cellpadding="3">
<asp:Repeater
ID="reorderInFo"
runat="server">
<ItemTemplate>
<tr
style="text-align:
left">
<td
width="70"
height="40"
id="OrderName">
订单名称：
</td>
<td
colspan="5"
class="caname"
id="OrderName1">
<%#Eval("OrderName")%>
</td>
</tr>
<tr
style="text-align:
left">
<td
width="70"
height="40"
id="ID_Product">
产品类型:
</td>
<td
class="caname"
id="ID_Product1">
<%#Eval("ID_Product")%>
</td>
<td
width="40"
id="OrderState_Send">
状态:
</td>
<td
class="caname"
id="OrderState_Send1"
><%#Eval("OrderState_Send")%>
</td>
<td
width="40"
id="OrderQty">
印量:
</td>
<td
class="caname"
id="OrderQty1"
><%#Eval("OrderQty")%>
</td>
</tr>
<tr>
<td
width="70"
height="60"
id="SendAddress">
收货信息:
</td>
<td
colspan="5"
class="caname"
id="SendAddress1"
><%#Eval("SendAddress")%>
</td>
</tr>
<tr
style="text-align:
left">
<td
width="70"
height="50"
id="OrderMoney_Total">
总金额:
</td>
<td
colspan="5"
class="caname"
id="OrderMoney_Total1"
><%#Eval("OrderMoney_Total")%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
这是js
03.js
复制代码
代码如下:
$(function
()
{
//获取class为caname的元素
$(".caname").click(function
()
{
var
td
=
$(this)
var
txt
=
$.trim(td.text())
var
input
=
$("<input
type='text'value='"
+
txt
+
"'/>")
td.html(input)
input.click(function
()
{
return
false
})
//获取焦点
input.trigger("focus")
//文本框失去焦点后提交内容，重新变为文本
input.blur(function
()
{
var
newtxt
=
$(this).val()
//判断文本有没有修改
if
(newtxt
!=
txt)
{
td.html(newtxt)
//不需要使用数据库的这段可以不需要
//var
Order_Id
=
$("#ID_Order").text()
var
updateCol
=
$.trim(td.prev().attr("id"))//我重点要说的是着一句：td.prev()表示本td的上一个td。这句代码的意思是你所点击的td的上一个td的id（如果不明白可以看前面的03.aspx页面）。
//ajax异步更改数据库,加参数date是解决缓存问题
url
=
"../test/03.ashx?caname="
+
newtxt
+
"&updateCol="
+
updateCol
+
"&date="
+
new
Date()
//使用get()方法打开一个一般处理程序，data接受返回的参数（在一般处理程序中返回参数的方法
context.Response.Write("要返回的参数")）
//数据库的修改就在一般处理程序中完成
$.get(url,
function
(data)
{
//
if
(data
==
"1")
{
//
alert("该类别已存在！")
//
td.html(txt)
//
return
//
}
//
alert(data)
alert("修改成功")
td.html(newtxt)
})
复制代码
代码如下:
<p><span
style="font-size:14px">这是一般处理程序页面<span
style="font-family:Times
New
Roman">
03.ashx</span></span></p><p>
<%@
WebHandler
Language="C#"
Class="_03"
%></p>
复制代码
代码如下:
<p>using
System
using
System.Web
using
System.Data.SqlClient</p><p>public
class
_03
:
IHttpHandler
{
public
void
ProcessRequest
(HttpContext
context)
{
context.Response.ContentType
=
"text/plain"
int
OrderId
=
5</p><p>
string
newOrderName
=
context.Request.QueryString["caname"]//获取用户修改后的文字
string
updateCol
=
context.Request.QueryString["updateCol"]//获取用户修改的本td的上一个td的id的值（这个id与数据库中的列名相同）
string
sql
=
"update
eoPrintOrder
set
"
+
updateCol
+
"
<a
target="_blank"
href="mailto:=@name">=@name</a>
where
<a
target="_blank"
href="mailto:Id_order=@id'//">Id_order=@id"//</a>通过这一条sql语句，就可以对数据库进行修改
SqlParameter[]
pams
=
{
new
SqlParameter("@name",newOrderName),
new
SqlParameter("@id",OrderId)
}
string
data
=
DscySFL.DbHelp.ExecuteCommand(sql,pams
).ToString()
context.Response.Write(data)
}
public
bool
IsReusable
{
get
{
return
false
}
}</p><p>}</p>
一般来说，HTML页面是不能直接 *** 纵数据库的，因为安全性以及网络内网的原因、建议：在后台实现响应的代码，比如java，可以使用servlet来接收参数，然后调用数据库。具体的请搜索“JDBC”。前台提交参数到servlet的URL地址。
如果是其他的动态语言，也请搜索解决办法。
至于如何把0变为1，前台JS判断、然后传参数给servlet，servlet再执行update的SQL。
如果你想要几句话就说明白，那还是不适合做程序开发。如果你只想实现作业，那我就白说了。
对json数据进行增删改查，大部分是要对json数组进行 *** 作，我定义一个数组，进行 *** 作var list=[
{
id:1,
name:"张三",
age:12
},
{
id:2,
name:"李四",
age:21
},
{
id:3,
name:"王五",
age:31
}
]
这个json数组有三个对象，每个对象有三个属性，id,name,age
//增 *** 作，增加一个叫小胖的人
var obj={
id:4,
name:"小胖",
age:3
}
//push方法可以向数组进行增加 *** 作
list.push(obj)
//console.log会在浏览器f12时在控制太看到，建议用谷歌浏览器
console.log(obj)
//删 *** 作，删除刚刚叫小胖的人
//delnum用来记录要删除的人的索引
var delnum=-1
//用$.each进行循环，function里面的i，item是数组里每个对象的索引和具体对象,可以打印查看，方便理解
$.each(list,function(i,item){
console.log(i)
console.log(item)
if(item.name=="小胖"){
delnum=i
}
})
//splice方法表示从数组从索引delnum开始，删除1个对象
list.splice(delnum,1)
//打印一下
console.log(list)
//改 *** 作，修改所有人大于20岁的人，姓名前加一个“大”
//也是用$.each
$.each(list,function(i,item){
if(item.age>20){
item.name="大"+item.name
}
})
//查 *** 作，其实已经贯穿在上面了，查询所有大于20岁的人并打印出来
//用newlist记录查询的结果
var newlist=[]
//也是用$.each
$.each(list,function(i,item){
if(item.age>20){
//这一步不理解的，可以去看前面的增 *** 作
newlist.push(item)
}
})
//打印查询结果，会有姓名为李四和王五的数据出来（因为已经做了改 *** 作，其实应该是“大李四”和“大王五”）
console.log(newlist)
手敲得代码
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）