js 实现表格的可编辑状态

<table border="0" style="width:200px;margin:30px auto">
<tr><td>1</td><td>2</td><td><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><img src="edit.png" class="edit"></td></tr>
<tr><td>1</td><td>2</td><td><img src="edit.png" class="edit"></td></tr>
</table>
<script src="jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function(){
$(".edit").click(function() {
//str = $(this).val()=="编辑"?"确定":"编辑";
//$(this).val(str); // 按钮被点击后，在“编辑”和“确定”之间切换
var str = $(this).attr("src")=="edit.png"?"phone.png":"edit.png";
$(this).attr("src",str);
$(this).parent().siblings("td").each(function() { // 获取当前行的其他单元格
var obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
if(!obj_text.length) // 如果没有文本框，则添加文本框使之可以编辑
$(this).html("<input type='text' value='" $(this).text() "'>");
else // 如果已经存在文本框，则将其显示为文本框修改的值
$(this).html(obj_text.val());
});
});
});
</script>
说明：1、在table的某个单元格点击中，先取出该单元格的值，再将该值赋给一个input text，并将这个input text动态添加到这个单元格中，代码可以写成：
var tdvalue=$(this).val();
$(this).html("<input id='tempinput' type='text' value='" tdvalue "'/>");
2、当单元格失去焦点时，将文本框的值回填给单元格，代码写成：
$(this).html($("tempinput").val());
3、实际写代码时还要考虑临时加入的文本框的宽度要与单元格一致等内容。

简易效果图：

来源：CSDN

作者：会做饭的技术男

链接：https://blog.csdn.net/u011927449/article/details/104059527

标签

js代码

单元格

文本框