JQuery操作一个表格简单示例

xiaoxiao2022-06-11  20

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 οnclick="javascript:do_select(this)" href="javascript:;">选择</a> <a  οnclick="javascript:do_add(this)" href="javascript:;">增加一行↑</a> <a οnclick="javascript:do_copy(this)" href="javascript:;">复制 此行↓</a> <a οnclick="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>
转载请注明原文地址: https://www.6miu.com/read-4930265.html

最新回复(0)