[转]jquery 点击表格变为input可以修改无刷新更新数据
2023-09-11 14:16:15 时间
原文地址:http://www.freejs.net/article_biaodan_43.html
之前已经发了2篇类似的文章《点击变td为input更新》和《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》
这篇功能是一样的,不过实用性可能比不上前面的文章
![jquery 点击表格变为input可以修改无刷新更新数据 jquery 点击表格变为input可以修改无刷新更新数据](http://www.freejs.net/demo/43/demo.jpg)
PHP Code
- <table>
- <Tr><Td colspan="2">如果本例看不到数据请先添加一条记录,点击<a href="?action=add">这里可以添加</a></Td></Tr>
- <?php
- $sql="select * from `add_delete_record` where id>0";
- $rs=mysql_query($sql);
- if ($row = mysql_fetch_array($rs))
- {
- do {
- ?>
- <Tr bgcolor="#eeeeee">
- <Td><?php echo $row['id']?></Td>
- <Td class="bigclassname" ><span title="点击修改"><?php echo $row['text']?></span></Td>
- </Tr>
- <?php
- }
- while ($row = mysql_fetch_array($rs));
- }?>
- </table>
JavaScript Code
- <script>
- /**//*
- * 说明:用Jquery的方法,无刷新页面,编辑表格
- */
- $(function() {
- //给页面中有bigclassname类的标签上加上click函数
- $(".bigclassname").click(function() {
- var objTD = $(this);
- //先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
- var oldText = $.trim(objTD.text());
- //构造一个input的标签对象(作用是为了让这个input失效,不然点击多次后,文字会消失)
- var input = $("<input type='text' value='" + oldText + "' />");
- //当前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.php?id=" + bigclassid + "&bigclassname=" + newText;
- //AJAX异步更改数据库,data为成功后的回调返回值,用于显示提示信息
- $.get(url, function(data) {});
- });
- });
- });
- </script>
相关文章
- jQuery的Autocomplete插件的远程url取json数据的问题
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
- jQuery.extend函数详细用法!
- jQuery (DOM篇)
- JQuery入门(6)
- 使用jQuery和Bootstrap实现多层、自适应模态窗口
- Web前端JQuery面试题(二)
- jQuery中的$(window).load()与$(document).ready()以及jquery $(document).ready() 与window.onload的区别
- jQuery可拖拽排序列表jquery-sortable-lists
- jQuery 实现带下拉提示且自动填充的邮箱
- Jquery 临时
- Jquery 动画
- jquery操作表格 合并单元格
- 《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
- jQuery-File-Upload 使用,jQuery-File-Upload上传插件
- Jquery获取html参数, jquery.params.js 获取参数
- jquery Ajax请求示例,jquery Ajax基本请求方法示例
- jQuery的ajax请求express服务器返回数据
- Jquery_JQuery之DataTables强大的表格解决方案
- ajax jquery校验用户是否已经注册
- jquery 获取json数据
- 七.jQuery源码解析之.toArray()