JQuery操作一个表格简单示例

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>