87,910
社区成员
发帖
与我相关
我的任务
分享JQuery可编辑表格
用JQuery写一个可编辑表格，具体思想是：点击insert按钮后，在表格中追加文本输入框，输入完成，检测到失去焦点事件后将文本输入框替换成表格内容，用户想再次编辑时，检测到click事件重新将表格内容替换成文本输入框。这是我写的程序，在替换的处理上好像不对，请大家帮帮忙。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#insert").bind("click", function(){
$input1=$("<input type='text' class='input'/>");
$input2=$("<input type='text' class='input'/>");
$col1=$("<td></td>")
.append($input1);
$col2=$("<td></td>")
.append($input2);
$row=$("<tr></tr>")
.append($col1)
.append($col2);
$("table").append($row);
$(".input")
.css("border", 0)
.css("width", $("td").width())
.css("font-size", $("td").css("font-size"));
$(".input").blur(function(){
var info = $(this).val();
$(this).parent().replaceWith("<td class='fake'>"+info+"</td>");
});
$(".fake").click(function(){
var info = $(this).text();
$input = $("<td><input type='text' class='input' value='"+info+"'></td>");
$(this).parent().replaceWith($input);
});
});
});
</script>
<style>
body{
font-size: 14px;
}
table{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
th{
width: 50%;
border: 1px solid #C1DAD7;
}
td{
width: 50%;
border: 1px solid #C1DAD7;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>000001</td>
<td>张三</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td id="six">赵六</td>
</tr>
</tbody>
</table>
<input type="button" id="insert" value="insert" />
</body>
</body>
</html>
...全文
请发表友善的回复…
发表回复
jia1546 2012-04-07
- 打赏
- 举报
谢谢，原来可以用live函数解决这个问题
001007009 2012-04-07
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#insert').click(function(){
var s = '<tr><td><input /></td><td><input /></td></tr>';
$('tbody').append(s);
})
$('tbody :input').live('blur', function(){
$(this).parent().html( this.value );
return false;
})
$('td').live('click', function(){
if( !$(this).find(':input').length ){
$(this).html('<input value="'+this.innerHTML+'" />');
$(this).find(':input').focus();
}
})
});
</script>
<style>
body{
font-size: 14px;
}
table{
color: #4F6B72;
border: 1px solid #C1DAD7;
border-collapse: collapse;
width: 400px;
}
th{
width: 50%;
border: 1px solid #C1DAD7;
}
td{
width: 50%; height:30px; line-height:30px;
border: 1px solid #C1DAD7;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>000001</td>
<td>123</td>
</tr>
<tr>
<td>000002</td>
<td>李四</td>
</tr>
<tr>
<td>000003</td>
<td>王五</td>
</tr>
<tr>
<td>000004</td>
<td>赵六</td>
</tr>
</tbody>
</table>
<input type="button" id="insert" value="insert" />
</body>
</body>
</html>
</body>
</html>
这个意思？
