成功后如何使用AJAX在TD中显示值和图像
how to show the value and image in td using ajax after success
当我刷新页面时,它在TD中显示值和图像,但是当您单击TD时,它将在TD中显示编辑后执行内联编辑功能TD中的图像消失,我希望图像在编辑TD后稳定,任何人都可以查看我的代码并指导我吗。
下面是我的代码
阿贾克斯
$(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');
});
});
目录:
<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点击功能中,您将该单元格的HTML设置为输入框,有效地覆盖了图像。修复它的唯一方法是在完成编辑后重置图像或将图像放入其他单元格中。
相关文章:
- 使用JSP从服务器检索和显示图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使用FormData上传AJAX图像;t在服务器端显示图像
- 选择文件后显示图像
- Chrome(webkit?)无法在幻灯片中正确显示图像
- 如何使用javascript显示图像
- 使用JS按顺序显示图像,而不是随机显示
- 使用服务器上的HTML/js在网页上显示图像
- 我想在选择输入文件上显示图像
- Javascript:单击单选按钮时显示图像
- 如何将JSON结果设置为'src'共'img'以在ASP.NET MVC4中显示图像
- 无法在cakepp布局中显示图像
- 页面加载后通过javascript显示图像
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 使用AngularJs数据绑定的三元运算符显示图像
- 加载时画布上未显示图像
- 运行POST时显示图像
- NodeJS上没有显示图像
- 从Javascript在表中显示图像
- 如何在MVC5中运行时在HTML5 Canvas中显示图像