jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

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);  
?>   
 

补充：web前端 , JavaScript ,

上一个：jquery第九期：map，has，each用法
下一个：[Ext JS 4] 布局之实战二 - 中间区块不会自动伸展 （tab）续