php - jquery Ajax 成功后突出显示数据

Question

我正在通过 jquery Ajax 在我的网页中创建内联编辑。

在我的代码中，我可以编辑表数据，但我想在编辑几秒钟的时间内突出显示更改的数据。

我应用了许多代码，例如:

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

但这并没有给我正确的结果

这是我的 PHP 代码:

while($rows = mysql_fetch_array($result))
    {


        echo "<tr>";

        echo '<td>'.$rows["id"].'</td>
        <td class="edit uname '.$rows["id"].'">'.$rows["uname"].'</td>
        <td class="edit pass '.$rows["id"].'">'.$rows["pass"].'</td>

        </tr>';
    }

这是我的 jquery:

<script>
$(document).ready(function(){
    $('td.edit').click(function(){
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');
        $('#editbox').focus();
    });

    $('td.edit').keydown(function(event){
        arr = $(this).attr('class').split(" ");
        if(event.which == 13) { 
            $.ajax({    
                type: "POST",
                url:"config.php",
                data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
                success: function(data){
                    $('.ajax').html($('.ajax input').val());
                    $('.ajax').removeClass('ajax');
                    $( "#toggle" ).toggle( "highlight" );
                }
            });
        }
    });

    $('#editbox').live('blur',function(){
        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
    });

});

</script>

所以请 friend 们帮助我。

Answer 1

您可以在 td.edit 点击事件中添加突出显示效果

 $('td.edit').click(function(){

        $(this).parent().effect("highlight", {}, 3000); //create highlight effect on parent tr

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');
        $(this).addClass('ajax');
        $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');
        $('#editbox').focus();
    });

这是fiddle