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>