前端之家收集整理的这篇文章主要介绍了
ajax无刷新更新表格内容，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<div id="Table">
<table class="table">
<thead>
<tr>
<td class="numberCol">
<div class="td-content"></div>
</td>
<td class="table-index sortable desc">
<div class="td-content">系统名称</div>
</td>
<td class="table-index sortable desc">
<div class="td-content">版本号</div>
</td>
</tr>
</thead>
<tbody>
<tr class="line">
<td class="numberCol" data="1">
<div class="td-content">1</div>
</td>
<td class="table-index" filed="sy_name">
<div class="td-content">winxp</div>
</td>
<td class="table-index" filed="sy_version">
<div class="td-content">1.0</div>
</td>
</tr>
<tr class="line">
<td class="numberCol" data="2">
<div class="td-content">2</div>
</td>
<td class="table-index" filed="sy_name">
<div class="td-content">win7</div>
</td>
<td class="table-index" filed="sy_version">
<div class="td-content">3.2</div>
</td>
</tr>
<tr class="line">
<td class="numberCol" data="3">
<div class="td-content">3</div>
</td>
<td class="table-index" filed="sy_name">
<div class="td-content">visita</div>
</td>
<td class="table-index" filed="sy_version">
<div class="td-content">3.9</div>
</td>
</tr>
<tr class="line">
<td class="numberCol" data="4">
<div class="td-content">4</div>
</td>
<td class="table-index" filed="sy_name">
<div class="td-content">os</div>
</td>
<td class="table-index" filed="sy_version">
<div class="td-content">3.0</div>
</td>
</tr>
<tr class="line">
<td class="numberCol" data="5">
<div class="td-content">5</div>
</td>
<td class="table-index" filed="sy_name">
<div class="td-content">linux1</div>
</td>
<td class="table-index" filed="sy_version">
<div class="td-content">4.0</div>
</td>
</tr>
<input type="hidden" name="type" value="system">
</tbody>
</table>
</div>
<script type="text/javascript">
$(function(){
$('#Table tbody td[class !=numberCol ]').click(function(){
if(!$(this).is('.input')){
$(this).addClass('input').html('<input type="text" value="'+$.trim($(this).text())+'" />').find('input').focus().blur(function(){
var id = $.trim($(this).parent().siblings("td:eq(0)").attr('data'));
var val=$.trim($(this).val());
var filed = $.trim($(this).parent().attr("filed"));
var type = $.trim($("input[name=type]").val());
var query = new Object();
query.id = id;
query.v = val;
query.filed = filed;
query.type = type;
$.ajax({
type: 'POST',url: "<?PHP echo site_url('manage/edit')?>",data: query,dataType:'json',success:function(result){
if(result.status == 0 || result.status == -1)
{
alert(result.msg);
}
}
});
$(this).parent().removeClass('input').html($(this).val() || 0);
});
}
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
</script> 原文链接：https://www.f2er.com/ajax/165144.html
