javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

发布时间:2019-03-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 td点击后变为input可以输入,更新数据,无刷新更新

 

演示

 

 

XML/HTML Code

<table border="0" cellpadding="0" cellspacing="0">    

            

            <tr>    

                <th><a href="https://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[&#39;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+"&amp;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);  

?>   

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格全部内容,希望文章能够帮你解决javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。