可编辑表格

$(".edittable tr td").click(function(){
$(this).html('<input type="text" id="tableedit"value='+$(this).text()+">").children("#tableedit").focus().blur(function(){
$(this).parent().text($(this).val()).mouseleave(function(){
$(this).data("fileds",$(this).index());
$(this).data('id',$(this).parent().index()) ;
$(this).data('contents',$(this).text());
$(this).ajax({
url:"test.php",
type="POST",
data:{
fileds: $(this).data('fileds'),
id:$(this).data('id'),
contents:$(this).data('contents')
}
}) //提交到服务器处理
$(this).unbind("mouseleave"); //解除单元格鼠标离开绑定
});
});
});



=====html==
<table class="edittable">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
</tr>
</table>