效果:
对应的文档结构:
Test.aspx 前台代码:
引入JQuery(jquery-1.8.3.min.js)。
引入自己所写的JS代码(UserJS.js)。
#table1 {
margin:0 auto;
}
#table1 tr, #table1 tr th, #table1 tr td{
border:1px solid #ff6a00;
}
ID | Name | Score |
---|---|---|
Test.aspx.cs 前台页面对应的后台代码:
protected void Page_Load(object sender, EventArgs e)
{
string text = "select ID, Name, Score from Tb_Mark";
this.Repeater1.DataSource = SQLHelper.ExecuteTable(text, CommandType.Text);
this.Repeater1.DataBind();
}
UserJS.js 自己所写的JS代码:
$(function () {
//为每一个Class为Score的标签添加Click事件
$(".Score").click(function () {
var object = $(this);//保存对象
var Oldvalue = object.text();//获取文本框中的值
var input = $("");//保存input对象
object.html(input);//将上面所定义的文本框写入到界面
input.select();//将文本框中的内容处于选中状态
input.click(function () {//文本框的点击事件
return false;//使点击过后的文本框失效
})
//获取ID值
var ID = object.prev().prev().text();
//这个步骤是,将文本框中的值(不管是新值还是原始值),重新变成文本显示
//同时也解决了,其他文本框为多选中的问题
input.blur(function () {//失去焦点事件
var NewValues = $(input).val();//获取文本框中的值
object.html(NewValues);//使文本框变为新值
//-----------------------------------------使用Ajax异步执行--------------------------------------------//
//Ajax异步执行
$.ajax({
type: "GET",
url: "../Handeler/Ajax.ashx",//用来指定要传递给哪个处理页面(不限于一般处理程序,也可以使aspx页面)。
data: "Value=" + encodeURI(NewValues) + "&ID=" + ID + "",//要传递的数据。
success: function (msg) {//接收后台程序的返回值。
if (!msg) {
alert("修改失败!");
}
}
});
//----------------------------------------------------------------------------------------------------//
});
})
})
Ajax.ashx 后台的一般处理程序代码:
如果使用 GET 传值,则使用 Request.QueryString["ID"].ToString(); 进行接收数据。
如果使用 POST 传值,则使用 Request.Form["ID"].ToString(); 进行接收数据。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using DAL;
namespace Shop.Handeler
{
///
/// Ajax 的摘要说明
///
public class Ajax : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//Ajax异步执行
//$.ajax({
// type: "GET",
// url: "../Handeler/Ajax.ashx",//用来指定要传递给哪个处理页面(不限于一般处理程序,也可以使aspx页面)。
// data: "Value=" + encodeURI(NewValues) + "&ID=" + ID + "",//要传递的数据。
// success: function (msg) {//接收后台程序的返回值。
// if (!msg) {
// alert("修改失败!");
// }
// }
//});
string ID = context.Request.QueryString["ID"].ToString();
string value = context.Request.QueryString["Value"].ToString();
string text = "update Tb_Mark set Score = '" + context.Server.UrlDecode(value) + "' where ID = '" + ID + "'";
if (!(SQLHelper.ExecuteNonQuery(text, System.Data.CommandType.Text) == 1))
{
context.Response.Write(true);
}
else
{
context.Response.Write(false);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
input文本框禁止修改文本——disabled和readonly属性的作用及区别
1.input文本框禁止修改文本 disabled属性:
ajax实例及实现文本框异步搜素
search.jsp(WebContent/jsp/search.jsp)
js中点击空白区域时文本框与隐藏层的问题
当文本框获得焦点的时候,在文本框的下方显示一个浮动层. 当用户点击除了文本框和浮动层以外的网页空白处时,要隐藏浮动层. 当用户点击浮动层时,改变文本框的值. UB ...
js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 function get1(){ document.getElementById("txtb ...
随机推荐
HTTP 错误 503.2 - Service Unavailable 正在超过 serverRuntime@appConcurrentRequestLimit 设置的值。
HTTP 错误 503.2 - Service Unavailable 正在超过 serverRuntime@appConcurrentRequestLimit 设置的值. dudu的解决办法:htt ...
在Mac上配置Android adb命令
一 adb定义: adb(android debug bridge)是android系统中的一种命令行工具,通过它可以和android设备或模拟器通信. 二 在Mac上的配置过程 启动终端 进入当前用 ...
九度OJ 1534 数组中第K小的数字 -- 二分查找
题目地址:http://ac.jobdu.com/problem.php?pid=1534 题目描述: 给定两个整型数组A和B.我们将A和B中的元素两两相加可以得到数组C. 譬如A为[1,2],B为[ ...
jdk1.5多线程Lock接口及Condition接口
jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...
UWP 绘制图形
UWP图形和wpf变化不多 一般用到有椭圆.长方形.多边形.线 不过如果用的好,可以做出很漂亮的界面 一般使用画图都是使用Shape 类,Shape 类具有一个与其关联的画笔并可以呈现到屏幕,包括 L ...
java-面向对象的多态性摘要
多态的作用就是用来将接口和实现分离开,改善代码组织结构,增强代码可读性,便于代码的维护. 在java中,讨论多态就是讨论方法调用的绑定,绑定就是将一个方法调用同一个方法主体联系起来.在java中通常叫 ...
newcoder Tachibana Kanade Loves Probability(小数点后第k位)题解
题意:题目链接立华奏在学习初中数学的时候遇到了这样一道大水题: “设箱子内有 n 个球,其中给 m 个球打上标记,设一次摸球摸到每一个球的概率均等,求一次摸球摸到打标记的球的概率” “emmm...语 ...
2018SDIBT_国庆个人第七场
A - Complete the Word(暴力) Description ZS the Coder loves to read the dictionary. He thinks that a wo ...
【转】解决configure: error: C++ compiler cannot create executables问题
转自:http://www.coderbolg.com/content/83.html 啊……天啊,./configure时报错:configure: error: C++ compiler cann ...
GUI库之认识Tkinter(一)
一.介绍 Tkinter是Python默认的GUI库,我们经常使用的IDLE就是用Tkinter设计出来的,因此我们在使用的时候直接导入Tkinter模块就好了. 1.特点:可移植性.灵活性高 2.构 ...