jQuery 即点即改
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>即点即改</title>
</head>
<style type="text/css">
td{
width: 200px;
}
</style>
<body>
<table border="1">
<tr height="50px">
<th>ID</th>
<th>name</th>
<th>vales</th>
</tr>
<tr height="50px">
<td>1</td>
<td><span class="click">张三</span></td>
<td>人</td>
</tr>
<tr height="50px">
<td>2</td>
<td><span class="click">张三</span></td>
<td>生</td>
</tr>
<tr height="50px">
<td>2</td>
<td><span class="click">张三</span></td>
<td>生</td>
</tr>
</table>
<script src="jq.js"></script> //引用jQuery库类
<script type="text/javascript">
$(document).on("click", ".click", function () {
var con = $(this).html();
$(this).parent().html("<input type="text" value=" + con + " />");
$("input").focus();
$(document).on("blur", "input", function () {
var a = $("input").val();
$(this).parent().html("<span class="click">" + a + "</span>");
});
});
</script>
</body>
</html>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： jQuery即点即改
- 下一篇： 左旋字符串的三种实现
