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

 

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