qsfwy 发表于 2013-2-7 18:14:44

JQuery操作一个表格

<div style="overflow: auto; width: 500px;"><!----><script type="text/javascript" src="http://www.cnblogs.com/Files/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>
页: [1]
查看完整版本: JQuery操作一个表格