JS点击修改事件
css样式代码
<style>
table,table td{
border: 1px solid #ccc;
border-collapse: collapse;
}
td{
width: 150px;
height: 30px;
}
input{
width: 100%;
height: 26px;
display: none;
}
div{
width: 100%;
height: 30px;
line-height: 30px;
}
</style>
Html代码
<table>
<p>点击学号进行修改</p>
<tr><td>学号</td><td>姓名</td></tr>
<tr><td><div>001</div><input type="text" /></td><td>张三</td></tr>
<tr><td><div>002</div><input type="text" /></td><td>李四</td></tr>
<tr><td><div>003</div><input type="text" /></td><td>王五</td></tr>
<tr><td><div>004</div><input type="text" /></td><td>马六</td></tr>
<tr><td><div>005</div><input type="text" /></td><td>老七</td></tr>
</table>
JQuery代码
<script>
$(function(){
$("div").on("click",function(){
// $(":input").show().focus();
// $(this).next(":input").show().focus().select();
// $(this).next(":input").val($(this).text());
$(this).next(":input").val($(this).text()).show().focus().select();
$(this).hide();
});
$(":input").blur(function(){
$(this).hide();
// $("div").show();
// $(this).prev("div").show();
// $(this).prev("div").text($(this).val());
$(this).prev("div").text($(this).val()).show();
});
});
</script>
效果演示