修改 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>