Javascript 成功后如何使用ajax在td中显示价值和图像

Javascript 成功后如何使用ajax在td中显示价值和图像,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,当我刷新页面时,它会在td中显示值和图像,但当您单击td时,它会在显示td中的编辑值后执行内联编辑功能。td中的图像会消失,我希望在td编辑后图像稳定,有人可以查看我的代码并指导我。谢谢 下面是我的代码 Ajax $(document).ready(function () { $('td.edit').click(function () { $('.ajax').html($('.ajax input').val()); $('.a

当我刷新页面时,它会在td中显示值和图像,但当您单击td时,它会在显示td中的编辑值后执行内联编辑功能。td中的图像会消失,我希望在td编辑后图像稳定,有人可以查看我的代码并指导我。谢谢

下面是我的代码

Ajax

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

            $('.ajax').html($('.ajax input').val());
            $('.ajax').removeClass('ajax');

            $(this).addClass('ajax');
            $(this).html('<input id="editbox"  size="10" 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: "supplierprice/config.php",
                    data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
                    success: function (data) {

                        $('.ajax').html($('.ajax input').val());
                        $('.ajax').removeClass('ajax');


                    }
                });
            }
        }


    );


    $('#editbox').live('blur', function () {

        $('.ajax').html($('.ajax input').val());
        $('.ajax').removeClass('ajax');


    });

});
$(文档).ready(函数(){
$('td.edit')。单击(函数(){
$('.ajax').html($('.ajax输入').val());
$('.ajax').removeClass('ajax');
$(this.addClass('ajax');
$(this.html(“”);
$(“#编辑框”).focus();
}
);
$('td.edit').keydown(函数(事件){
arr=$(this.attr('class').split(“”);
if(event.which==13){
$.ajax({
类型:“POST”,
url:“supplierprice/config.php”,
数据:“value=“+$('.ajax input').val()+”&rowid=“+arr[2]+”&field=“+arr[1]”,
成功:功能(数据){
$('.ajax').html($('.ajax输入').val());
$('.ajax').removeClass('ajax');
}
});
}
}
);
$('#editbox').live('blur',function(){
$('.ajax').html($('.ajax输入').val());
$('.ajax').removeClass('ajax');
});
});
Html:

<table id="sorting" class="tablesorter" style="width: 100px;" >        
<tbody >
<?php

$sql = mysql_query("SELECT * FROM supplierprice ");


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

if($alt == 1)
        {
           echo '<tr class="alt">';
           $alt = 0;
        }
        else
        {
           echo '<tr>';
           $alt = 1;
        }

echo '  <td class="edit region '.$rows["supp_price_id"].'">'.$rows["region"].'</td>
        <td class="edit country '.$rows["supp_price_id"].'">'.$rows["country"].'</td>
        <td class="edit networkname '.$rows["supp_price_id"].'">'.$rows["networkname"].'</td>
        <td class="edit mcc '.$rows["supp_price_id"].'">'.$rows["mcc"].'</td>    
        <td class="edit mnc '.$rows["supp_price_id"].'">'.$rows["mnc"].'</td>
        <td class="edit mnp '.$rows["supp_price_id"].'">'.$rows["mnp"].'</td>';


$ColumnNames = mysql_query("SELECT column_name FROM information_schema.COLUMNS WHERE table_name = 'supplierprice' AND column_name NOT
IN ('supp_price_id','region', 'country', 'networkname', 'mcc', 'mnc', 'mnp'
)") or die("mysql error"); 
$columnArray=array();
$i=0;
while($rows1=mysql_fetch_array($ColumnNames))
{

$columnArray[]=$rows1[0];

echo '<td width="0px;" class="edit '.$columnArray[$i].' '.$rows["supp_price_id"].'">'.$rows[$columnArray[$i]].'<div style="margin:0px;"><a class="big-link" data-reveal-id="myModal">
            <span>  <img id="logo"  src="/image/Picture8.png" style="margin:0px;cursor:pointer;"></span>
        </a> <a class="big-link" data-reveal-id="doubleModal">
            <span>  <img id="logo"  src="/image/Picture7.png" style="margin:0px;cursor:pointer;"></span>
        </a> <div> </td>';          


$i++;
}    
echo '</tr>';
    }
    ?>
       </tbody>
       </table>


在td.edit on click函数中,您将该单元格的HTML设置为有效覆盖图像的输入框。唯一的解决方法是在编辑完图像或将图像放入其他单元格后重置图像。

如果将问题缩小到相关代码,或者更多地解释您正在尝试做什么,减少大量粘贴,那么它将有很大帮助。当我刷新页面时,它会显示td中的值和图像,但是,当您单击td时,它将在显示td中的编辑值后执行内联编辑功能。编辑td时,td中的图像将消失