jquery 在 table 中修改某行值

修改 table 中某行的的方法步骤如下：

1、选择要修改的行，事件触发，比如我的 双击某行时修改

2、将要修改的行，替换为input，原先的列中的值，需要放到对应的input中作为默认值

3、修改完成后，事件触发将其还原，比如我的 如果鼠标移走，不在该行上时触发

 

$(function(){      
      $('tr.modifyType').dblclick(function(){
      var oldid = $(this).find(".id").val().replace(/[\r\n\s]/g,"");    
              var oldkeyCode= $(this).find(".keyCode").html().replace(/[\r\n\s]/g,""); 
              var oldkeyName= $(this).find(".keyName").html().replace(/[\r\n\s]/g,""); 
              var oldkeyType= $(this).find(".keyType").html().replace(/[\r\n\s]/g,"");         
              var olddefaultValue= $(this).find(".defaultValue").html().replace(/[\r\n\s]/g,"");  
      var type = '<select  class="keyType"   ><option value="text">text</option><option value="table">table</option>'
      +'<option value="image">image</option></select>';
      var str = '<input id="isDblFlag" type="hidden"><input class="id" type="hidden" value="'+oldid
      +'"><td class="keyCode">'+oldkeyCode
      +'</td><td><input type="text" class="keyName" value="'+oldkeyName
      +'"></td><td>'+type
      +'</td><td ><input type="text"class="defaultValue" value="'+olddefaultValue+'"></td>';

          $(this).html(str);          
    }).hover(function(){    
        $(this).addClass('keyhover');    
    },function(){ 
         if($("#isDblFlag").length>0)
          {
              var thisid = $(this).find(".id").val();    
              var keyCode= $(this).find(".keyCode").html(); 
              var keyName= $(this).find(".keyName").val(); 
              var keyType= $(this).find(".keyType").val();         
              var defaultValue= $(this).find(".defaultValue").val();    
             
               
              str = '<input class="id" type="hidden" value="'+thisid
              +'"><td class="keyCode">'+keyCode
              +'</td><td class="keyName">'+keyName
              +'</td><td class="keyType">'+keyType
              +'</td><td class="defaultValue">'+defaultValue+'</td>';
              $(this).html(str);
          }   
        $(this).removeClass('keyhover');    
    });

  });

 

对应的html页面

<style>
.keyhover
{
background-color:green
}
</style>

<table class="table">
<tr><th>关键字</th><th>关键字含义</th><th>类型</th><th>默认值</th></tr>
<tr class="modifyType">
     <input class="id" type="hidden" value="id">
     <td class="keyCode">keyCode</td>
     <td class="keyName">keyName</td> 
     <td class="keyType">keyType</td> 
     <td class="defaultValue">defaultValue</td>
 </tr> 
 </table>