php< td>,Jquery php 点击td变成input,修改后失去焦点发送数据

html部分

<?php echo $row['bigclassid']?><?php echo $row['bigclassname']?>

Js部分

/**//*

* 说明:用Jquery的方法,无刷新页面,编辑表格

*/

$(function() {

//给页面中有bigclassname类的标签上加上click函数

$(".bigclassname").click(function() {

var objTD = $(this);

//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格

var oldText = $.trim(objTD.text());

//构造一个input的标签对象(作用是为了让这个input失效,不然点击多次后,文字会消失)

var input = $("");

//当前td的内容变为文本框,并且把老类别名放进去

objTD.html(input);

//设置文本框的点击事件失效

input.click(function() {

return false;

});

//设置文本框样式,让界面显示的人性化点

input.css("font-size", "16px");

input.css("text-align", "center");

input.css("background-color", "#ffffff");

input.width("120px");

//自动选中文本框中的文字

input.select();

//文本框失去焦点时重新变为文本

input.blur(function() {

//获得新输入的类别名

var newText = $(this).val();

//用新的类别名文字替换之前变过来的输入框状态

objTD.html(newText);

//获取该类别名所对应的ID(bigclassid)

var bigclassid = objTD.prev().text();

//将新的类别名进行转码,不然界面以及数据库显示的都是"???"这样的乱码

newText = escape(newText);

//获取要传到"一般处理文件"(update_bigclassname_2.php)中的URL

var url = "update_bigclassname_2.php?bigclassid=" + bigclassid + "&bigclassname=" + newText;

//AJAX异步更改数据库,data为成功后的回调返回值,用于显示提示信息

$.get(url, function(data) { alert(data) });

});

});

});

更新数据库的过程就是普通的php程序

本例要用到jquery请自行下载后调试

0818b9ca8b590ca3270a3433284dd417.png

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> @import url("css/table.css"); </style> <title>学生信息</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div> <button>批量删除</button> </div> <table> <thead> <tr> <th><label><input type="checkbox" /></label></th> <th>学号</th> <th>姓名</th> <th>专业</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><label><input type="checkbox" /></label></td> <td>9527</td> <td>唐伯虎</td> <td>国画</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>007</td> <td>武松</td> <td>体育</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1024</td> <td>诸葛亮</td> <td>心理学</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>1010</td> <td>刘义</td> <td>计算机</td> <td> <button class="view">查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>6969</td> <td>晨儿</td> <td>桑蚕技术</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>666</td> <td>章三</td> <td>小龙虾烹饪</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> <tr> <td><label><input type="checkbox" /></label></td> <td>5520</td> <td>里斯</td> <td>天文</td> <td> <button>查看</button><button>修改</button><button>删除</button> </td> </tr> </tbody> <tfoot> <tr> <td colspan="5"> <a href="#">尾页</a> <a href="#">下一页</a> <a href="#">上一页</a> <a href="#">首页</a> </td> </tr> </tfoot> </table> <script> 如何实现删除功能?
最新发布
06-13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值