jQuery實現複製當前tr到下面表格，刪除複製tr
阿新 • • 發佈：2019-01-03
直接上程式碼，複製貼上的時候別忘記引用Jquery外掛
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>tr複製</title> <style type="text/css"> </style> </head> <body> <table rules=none border="1" cellspacing="0" class="select_table"> <tbody id='record'> <tr class="table_head"> <th>訂單編號</th> <th>訂單日 </th> <th>訂單餘額 </th> <th>最後一次付款日</th> <th>操作</th> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> <tr> <td>758493847523</td> <td>2018/10/11</td> <td>34324.00</td> <td>2018/12/11</td> <td> <button class="select_option table_button">選擇</button> </td> </tr> </tbody> </table> <table rules=none border="1" cellspacing="0" class="select_table"> <tbody> <tr class="choosen"> <th>訂單編號</th> <th>訂單日 </th> <th>訂單餘額 </th> <th>最後一次付款日</th> <th>操作</th> </tr> </tbody> </table> <script src="jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function () { $(".select_option").each(function (index) { $(this).click(function () { $(this).attr("data-index", index) $(this).html("刪除"); $(this).addClass('btn_delete') // console.log($(this).parents("tr")) $(".choosen").after($(this).parents("tr").clone()) $(this).html("已選擇"); $(this).removeClass('btn_delete') }) }) }) $(function () { $("body").on("click", ".btn_delete", function () { var index = Number($(this).attr("data-index")) + 1 // console.log(index) // console.log($(".select_table tr").eq(index).clone().html()) $(".select_table tr").eq(index).find(".select_option").html('選擇') $(this).parents("tr").remove() }) }) </script> </body> </html>
點選選擇之前效果
點選選擇之後效果
點選刪除之後效果
