JQuery可编辑表格插件
0
悬赏园豆：20
[已解决问题]
解决于 2014-01-09 15:47
JQuery可编辑表格插件
单击可以编辑单元格数据，点击单元格以外区域可以取消编辑
可以动态添加行和列
可以动态删除行和列
像时间编辑插件一样点击文本框显示编辑区域
关闭数据编辑区域后可以把数据返回到文本框
有办法实现的大神可以QQ41020273联系我，有报酬。
最佳答案
0
<!DOCTYPE>
<html>
<head>
<title>一个实例搞懂css定位</title>
<style>
</style>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(function(){
/*单元格模拟excel*/
function td_excel(){
$("td").each(function(){
$(this).click(function(){
var txt=$(this).text();
if($(this).find("input").length<1 && $(this).find("button").length!=1){
if(txt!='')
$(this).text('');
$(this).append("<input value='"+txt+"'/>");
$(this).find("input").focus().blur(function(){
txt=$(this).prop("value");
$(this).parent().text(txt);
});
};
});
});
}
/*增删行*/
function tr_add_del(){
$("button").click(function(){
if($(this).text()=='删除'){
$(this).parent().parent().remove();
}else if($(this).text()=='增加'){
$(this).parent().parent().clone().appendTo("table");
td_excel();
tr_add_del();
};
});
}
td_excel();
tr_add_del();
});
</script>
</head>
<body>
<table border=1>
<tr>
<td>数据字段1</td>
<td>数据字段1</td>
<td>操作1</td>
<td>操作2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><button>删除</button></td>
<td><button>增加</button></td>
</tr>
</table>
</body>
</html>
刚刚写的
收获园豆：20
其他回答(3)
0
这种插件园子里有好多吧，搜搜就有了
0
直接Jquery用显示隐藏都能实现~
0
jquery 有个jqgrid插件 可以实现
