JQuery操作一个表格简单示例
2009-02-19 09:29
746 查看
jquery操作table的一个简单示例,仅做参考,具体可以根据原javascript操作table的操作更改为jquery操作方式。
<script type="text/javascript" src="http://files.cnblogs.com/liydotnet/jquery-1.2.3.js"></script>
<style type="text/css">
.mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px}
.mainTable td{ height:22px}
.line{ background-color:#fffff7; height:25px}
.line-none{ background-color:#fffff7; height:25px}
.selected{ background-color:#fff5fa}
.template{ background-color:#ffffdd;display:none; color:#e8f5fe}
.mainTable a{ margin-right:6px}
.mainTable a:link{color:#92b0dd }
.mainTable a:visited{color:#92b0dd}
.mainTable a:hover{color:#FF0000}
</style>
<table class="mainTable" cellspacing="1" cellpadding="1">
<tbody>
<tr class="template">
<td style="padding-left: 5px" colspan="3"></td>
</tr>
<tr class="line">
<td style="padding-left: 6px"></td>
<td></td>
<td style="width: 30%" align="center"><a onclick="javascript:do_select(this)" href="javascript:;">选择</a> <a
onclick="javascript:do_add(this)" href="javascript:;">增加一行↑</a> <a onclick="javascript:do_copy(this)" href="javascript:;">复制
此行↓</a> <a onclick="javascript:do_delete(this)" href="javascript:;">删除</a> </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function do_select(aa)
{
var id=$(aa);
id.parents("tr").addClass("selected");
id.attr("onclick","javascript:do_reset(this)").html("取消")
}
function do_reset(aa)
{
var id=$(aa);
id.parents("tr").removeClass("selected");
id.attr("onclick","javascript:do_select(this)").html("选择")
}
function do_copy(aa)
{
var id=$(aa);
var copy=id.parents("tr").clone();
var first=copy.find("td:first");
first.html("》"+first.html())
id.parents("tr").after(copy);
}
function do_add(aa)
{
var id=$(aa);
var template=$(".template").clone().attr("class","line-none");
var add=$(".line-none");
id.parents("tr").prev(".line-none").remove();
template.show().find("td:eq(0)").html("我是根据模板复制的的");
id.parents("tr").before(template);
}
function do_delete(aa)
{
var id=$(aa);
id.parents("tr").remove();
}
</script>
<script type="text/javascript" src="http://files.cnblogs.com/liydotnet/jquery-1.2.3.js"></script>
<style type="text/css">
.mainTable{ background-color:#ffcc00; width:85%; margin:auto; font-size:12px}
.mainTable td{ height:22px}
.line{ background-color:#fffff7; height:25px}
.line-none{ background-color:#fffff7; height:25px}
.selected{ background-color:#fff5fa}
.template{ background-color:#ffffdd;display:none; color:#e8f5fe}
.mainTable a{ margin-right:6px}
.mainTable a:link{color:#92b0dd }
.mainTable a:visited{color:#92b0dd}
.mainTable a:hover{color:#FF0000}
</style>
<table class="mainTable" cellspacing="1" cellpadding="1">
<tbody>
<tr class="template">
<td style="padding-left: 5px" colspan="3"></td>
</tr>
<tr class="line">
<td style="padding-left: 6px"></td>
<td></td>
<td style="width: 30%" align="center"><a onclick="javascript:do_select(this)" href="javascript:;">选择</a> <a
onclick="javascript:do_add(this)" href="javascript:;">增加一行↑</a> <a onclick="javascript:do_copy(this)" href="javascript:;">复制
此行↓</a> <a onclick="javascript:do_delete(this)" href="javascript:;">删除</a> </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function do_select(aa)
{
var id=$(aa);
id.parents("tr").addClass("selected");
id.attr("onclick","javascript:do_reset(this)").html("取消")
}
function do_reset(aa)
{
var id=$(aa);
id.parents("tr").removeClass("selected");
id.attr("onclick","javascript:do_select(this)").html("选择")
}
function do_copy(aa)
{
var id=$(aa);
var copy=id.parents("tr").clone();
var first=copy.find("td:first");
first.html("》"+first.html())
id.parents("tr").after(copy);
}
function do_add(aa)
{
var id=$(aa);
var template=$(".template").clone().attr("class","line-none");
var add=$(".line-none");
id.parents("tr").prev(".line-none").remove();
template.show().find("td:eq(0)").html("我是根据模板复制的的");
id.parents("tr").before(template);
}
function do_delete(aa)
{
var id=$(aa);
id.parents("tr").remove();
}
</script>
相关文章推荐
- jQuery在Rails3中的一个简单应用示例
- 一个简单的jquery进度条示例
- web开发——写一个简单的表格导出操作
- C++11中引入了一个用于多线程操作的thread类,简单多线程示例:
- 前端开发:一个开源、简单易用的jQuery表格插件(DataTables)
- 一个简单的jQuery例子,动态添加表格和删除
- JQuery操作一个表格
- 简单的jquery动态操作表格增加,删除!
- javascript 表格内容排序 简单操作示例代码
- js简单的表格添加行和删除行操作示例
- 分享 原创的一个模拟鼠标键盘操作的 设置简单 示例可以模拟向QQ群,以及QQ群内成员发送信息。
- jQuery学习笔记 - 2 简单的表格操作
- 超级简单的jquery操作表格方法
- 国外仿照flipboard的一个jquery操作示例
- 一个简单的jquery进度条示例
- PostgreSQL 的一个简单连接和查询操作——示例
- javascript 表格内容排序 简单操作示例代码
- 文件操作的一个简单示例
- javascript 表格内容排序 简单操作示例代码