可编辑表格

     $(".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>

你可能感兴趣的:(表格)