表格操作 – 有爱前端

得拿到本地测试

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格操作</title> <link id="bootstrap_221" rel="stylesheet" type="text/css" class="library" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <script id="jquery_172" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script id="bootstrap_221" type="text/javascript" class="library" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <button type="button" class="btn btn-primary" data-toggle="button">增加</button> <table class="table table-bordered"> <caption>边框表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> <td> <a href="javascript:;" class="btn btn-info edit btn-lg"><span class="icon-edit"></span>修改 </a> </td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> <td> <a href="javascript:;" class="btn btn-info edit btn-lg"><span class="icon-edit"></span>修改</a> </td> </tr> <tr> <td>Uma</td> <td>Pune</td> <td>411027</td> <td> <a href="javascript:;" class="btn btn-info edit btn-lg"><span class="icon-edit"></span>修改</a> </td> </tr> </tbody> </table> <script type="text/javascript"> //增加 $(".btn-primary").click(function(){ if($("table tr").hasClass("addtr")){ alert("先完成操作！！！"); }else{ $("table tr:last").after(' <tr class="addtr"><td><input type="text" name="names" value="" /></td>'+' <td><input type="text" name="sexs" value="" /></td>'+'<td><input type="text" name="ages" value="" /></td>' +'<td> <a href="javascript:;" class="btn save btn-info btn-lg">保存</a> <a href="javascript:;" class="btn off btn-info btn-lg">取消</a> </td>'+' </tr>'); } }) //保存 $(document).on("click",".save",function(){ var name =$(this).parent().parent().find('input[name="names"]').val(); var sex =$('input[name="sexs"]').val(); var age =$('input[name="ages"]').val(); var n=""; n+='<td>'+name+'</td>'; n+=' <td>'+sex+'</td>'; n+=' <td>'+age+'</td>'; n+=' <td>'; n+=' <a href="javascript:;" class="btn edit btn-info btn-lg"><span class="icon-edit"></span>修改</a>'; n+=' </td>'; $(this).parent().parent().removeClass("addtr"); $(this).parent().parent().html(n); }) //修改 $(document).on("click",".edit",function(){ if($("table tr").hasClass("addtr")){ alert("先完成操作！！！"); }else{ var name =$(this).parent().parent().find('td').eq(0).text(); var sex =$(this).parent().parent().find('td').eq(1).text(); var age =$(this).parent().parent().find('td').eq(2).text(); var n=""; n+='<td><input type="text" name="names" value="'+name+'" /></td>'; n+=' <td><input type="text" name="sexs" value="'+sex+'" /></td>'; n+=' <td><input type="text" name="ages" value="'+age+'" /></td>'; n+=' <td>'; n+=' <a href="javascript:;" class="btn save btn-info btn-lg">保存</a>'; n+=' <a href="javascript:;" class="btn off btn-info btn-lg">取消</a>'; n+=' </td>'; $(this).parent().parent().addClass("addtr"); $(this).parent().parent().html(n); } }) $(document).on("click",".off",function(){ window.location.reload(); }) </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 表格操作