Html简单demo_html列表中进行编辑操作

html列表中进行编辑操作

<div class="_sort_box" style="float: left;"><?php echo $vo['remark'];?></div>
     <div class="_sort_input_box" style="display:none; float: left;">
      <input type="text" style="60px;" value="<?php echo $vo['remark'];?>" />
     </div>
     <div class="_edit_box" style="float: right;margin-right: 15px;">
      <a class="_edit" href="javascript:void(0);" title="编辑客户备注">编辑</a>
     </div>
     <div class="_update_box" style="display:none;float: right;margin-right: 15px;">
      <input name="plugin_id" type="hidden" value="<?php echo $vo['user']?>" />
      <a class="_save" href="javascript:void(0);">保存</a>&nbsp;&nbsp;
      <a class="_cancel" href="javascript:void(0);">取消</a>
  </div>

//编辑
 $('._edit').click(function(){
  var tr = $(this).parents('tr');
  tr.find('._sort_box').hide();
  tr.find('._sort_input_box').show().find('input').val(tr.find('._sort_box').html());;
  tr.find('._edit_box').hide();
  tr.find('._update_box').show();
 });
 //保存
 $('._save').click(function(){
  if(window.flagReq == true)return;
  var plugin_id = $(this).prev('input[name=plugin_id]').val();
  var tr     = $(this).parents('tr');
  var sort    =  tr.find('._sort_input_box').find('input').val();
  var url    = "<?php echo url('User', 'updateRemark');?>";
  window.flagReq = true;
  $.post(url, {openId:plugin_id,remark:sort}, function(result) {
   result = eval('('+result+')');
   jsAlert(result.msg,function(){
    if(result.error == 0){
     tr.find('._sort_box').show().html(sort);
     tr.find('._sort_input_box').hide();
     tr.find('._edit_box').show();
     tr.find('._update_box').hide();
    }
    window.flagReq = false;
   });
  });
 });
 //取消
 $('._cancel').click(function(){
  var tr = $(this).parents('tr');
  tr.find('._sort_box').show();
  tr.find('._sort_input_box').hide()
  tr.find('._edit_box').show();
  tr.find('._update_box').hide();
 });