首页>>表单>>jQuery+Ajax实现排序,无刷新更新更新排序(2016-05-02)

jQuery+Ajax实现排序,无刷新更新更新排序

 本站有类似的案例，包括整个表格的多列均支持无刷新替换的效果，具体请搜索

jQuery+Ajax实现排序,无刷新更新更新排序
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script type="text/javascript">  
  2.                                 function changeOrd(obj, id) {  
  3.                                     var val = obj.text();  
  4.                                     var c = obj.parent("td");  
  5.                                     obj.parent("td").html("<input type='text' style='width:50px;' onFocus=this.select()  onblur=changeOrdConfirm($(this)," + id + ") value='" + val + "' />");  
  6.                                     c.children("input").focus();  
  7.                                 }  
  8.                                 function changeOrdConfirm(obj, id) {  
  9.                                     var ord = obj.val();  
  10.                                     $.post("ajax.php", {  
  11.                                         id: id,  
  12.                                         ord: ord  
  13.                                     }, function(data) {  
  14.                                         obj.parent("td").html("<a onclick=changeOrd($(this)," + id + ")>" + obj.val() + "</a>");  
  15.                                     })  
  16.                                 }  
  17.         </script>  
XML/HTML Code
  1. <table width="100%" cellspacing="0" cellpadding="0" border="0" class="table_parameters">  
  2.                    <tbody>  
  3.                        <tr class="tr_head">  
  4.                            <td>标题</td>  
  5.                            <td width="120px">排序</td>  
  6.                        </tr>  
  7.                        <?php  
  8.                        $sql = "SELECT * FROM content ORDER BY id ASC limit 0,10 ";  
  9.                        $query = mysql_query($sql);  
  10.                        while ($row = mysql_fetch_array($query)) {  
  11.                            ?>  
  12.   
  13.                            <tr>  
  14.                                <td align="center"><?php echo $row['name']; ?></td>  
  15.                                <td align="center"><a onclick="changeOrd($(this), '<?php echo $row['id']; ?>')"><?php echo $row['sort']; ?></a></td>  
  16.                            </tr>     
  17.                        <?php } ?>  
  18.                    </tbody>  
  19.                </table>  

 


原文地址:http://www.freejs.net/article_biaodan_554.html