ajax无刷新更新表格内容

最新推荐文章于 2021-08-05 17:10:46 发布

原创最新推荐文章于 2021-08-05 17:10:46 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #json

js学习专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery和Ajax实现表格内容的无刷新更新。通过监听表格中非编号列的点击事件，将被编辑单元格转换为输入框，用户修改后通过Ajax发送POST请求到后台进行数据更新。完成编辑后，恢复单元格内容并移除输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>