思路:点击按钮后,如果单元格内容不是可编辑状态,就将单元格替换为文本框,内容为当前单元格内容;再次点击即单元格内容已经是可编辑的文本框,就将单元格内容显示为文本框的值。详细说明及实例演示如下:
1、HTML结构:给出一个示例表格
<table>
<tr><td>1</td><td>2</td><td><input type="button" value="编辑"></td></tr>
<tr><td>2</td><td>5</td><td><input type="button" value="编辑"></td></tr>
<tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>
<tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>
</table>
2、jquery代码:
$(function(){
$("input:button").click(function() {
str = $(this).val()=="编辑"?"确定":"编辑";
$(this).val(str); // 按钮被点击后,在“编辑”和“确定”之间切换
$(this).parent().siblings("td").each(function() { // 获取当前行的其他单元格
obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
if(!obj_text.length) // 如果没有文升简本框,则添加文本框使之可以编辑
$(this).html("<input type='text' value='"+$(this).text()+"'>");
让李 else // 如果已经存在坦笑迟文本框,则将其显示为文本框修改的值
$(this).html(obj_text.val());
});
});
});
3、效果演示: