td点击后变为input可以输入,更新数据,无刷新更新
XML/HTML Code
- <table border="0" cellpadding="0" cellspacing="0">
- <tr>
- <th><a href="http://www.freejs.net">freejs.net演示</a></td>
- <th scope="col">列1</th>
- <th scope="col">第二列</th>
- <th scope="col">其他</th>
- </tr>
- <tbody>
- <?php
- require "conn.php";
- $sql="select * from `add_delete_record` where id>0";
- $rs=mysql_query($sql);
- if ($row = mysql_fetch_array($rs))
- {
- do {
- ?>
- <tr>
- <th><?php echo $row['id']?></th>
- <td class="content"><?php echo $row['content']?></td>
- <td class="text"><?php echo $row['text']?></td>
- <td class="position"><?php echo $row['position']?></td>
- </tr>
- </Tr>
- <?php
- }
- while ($row = mysql_fetch_array($rs));
- }?>
- </tbody>
- </table>
- 注意:5个字符以上数据库不能添加
- <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $('table td').click(function(){
- if(!$(this).is('.input')){
- $(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
- var thisid = $(this).parent().siblings("th:eq(0)").text();
- var thisvalue=$(this).val();
- var thisclass = $(this).parent().attr("class");
- $.ajax({
- type: 'POST',
- url: 'update.php',
- data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue
- });
- $(this).parent().removeClass('input').html($(this).val() || 0);
- });
- }
- }).hover(function(){
- $(this).addClass('hover');
- },function(){
- $(this).removeClass('hover');
- });
- });
- </script>
update.php
PHP Code
- <?php
- require "conn.php";
- $id = trim($_REQUEST['thisid']);
- $thisclass = trim($_REQUEST['thisclass']);
- $thisvalue= trim($_REQUEST['thisvalue']);
- if (substr_count($thisclass," ")>0){
- $thisclass=str_replace(" ","",$thisclass);
- }
- if (substr_count($thisclass,"input")>0){
- $thisclass=str_replace("input","",$thisclass);
- }
- $update_sql = "update add_delete_record set $thisclass='$thisvalue' where id='$id'";
- $result = mysql_query($update_sql);
- ?>
相关推荐
jquery表格可编辑修改表格里面的数值
JQuery实现可编辑的表格JQuery实现可编辑的表格
jQuery表格插件无刷新表格控制分页显示数据
jQuery实现可编辑化的表格,有兴趣的可以看看
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
使用jquery实现点击表格列可以编辑,自己学习之余给大家分享
本人前端小白,因为项目需求,需要动态编辑表格,但是layui的编辑表格只适合 【有数据】修改功能用,并不适合【无数据】新增的功能使用,所以本人研究了几日,才写出了这么一个 无数据绑定,当然也可以自行绑定数据...
用jquery做的表格无刷新排列,非常简单,你的要求不高时,可以用用
JQuery实现的简单可编辑表格,其中的数据可以根据需要从数据里读取,这里暂时写成静态的,只是为了演示一下JQuery的方便之处。
VS2008 编写 基于Jquey ajax 开发的表格控件 能够自定义表头,编辑、添加、删除、统计 数据全都是 json 格式 还能实现 在 表格里插入时间
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rarJQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar JQuery实现可编辑的表格.rar
使用jQuery实现动态可编辑表格,代码更少,兼容性更好
Jquery实现表格的可编辑,可以随时改变表格中的内容并保存。
jquery可编辑表格代码实现
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
jquery将table表格变成可编辑,解压压缩包,双击html页面即可看效果
双击表格元素TD时,在其中嵌入INPUT对象并接收TD元素数据,进行编辑后失焦点时数据由INPUT对象回送到TD元素。