<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.js"></script> <style> td{height:30px;border:1px solid #000;} </style> </head> <body> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable1"> <tbody> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期1</td><td>时间</td><td>登记人</td> </tr> </tbody> </table> <button onclick="addRow(this)" >添加1</button> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable2"> <tbody> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期2</td><td>时间</td><td>登记人</td> </tr> </tbody> </table> <button onclick="addRow(this)" >添加2</button> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; " id="modifytable3"> <tbody> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期3</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期4</td><td>时间</td><td>登记人</td> </tr> <tr> <td>日期5</td><td>时间</td><td>登记人</td> </tr> </tbody> </table> <button onclick="addRow(this)" >添加2</button> <script> function addRow(obj){ var td_i = 0; var td_str = ‘‘; td_i = $(obj).prev().children().children().last().children().length; console.log(td_i); for (var i = 0; i < td_i; i++) { td_str = td_str + ‘<td></td>‘; }; td_str = ‘<tr>‘ + td_str + ‘</tr>‘; $(obj).prev().children().children().last().after(td_str); td_str = ‘‘; td_i = 0; } </script> </body> </html> 删除(按钮在表格行内): function deleterowok(obj){ $(obj).closest("tr").remove(); }
时间: 2024-10-12 02:09:31