<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> tr{ text-align: center; height: 40px; width: 100px; } input{ height: 40px; border: none; outline: none; width: 100px; } </style> </head> <body> <table id="tab" border="1" cellspacing="0" cellpadding="0" width="450" align="center"> <tr><td colspan="5" align="center"><button id="add" class="btn">添加</button></td></tr> <Tr> <th> ID </ th> <th> Name </ th> <th> Hobby </ th> <th style = "width: 100px;"> modify </ th> <th style = "width: 100px; "> delete </ th> </ tr> </table> </body> <script type="text/javascript"> where i = 0, j = 0, q = 0, m = 0; $("#add").click(function(){ i=$("tr").length-2; i++; $("#tab").append('<tr><td>'+i+'</td><td>'+'<input class="txt1" type="text"/>'+'</td><td>'+'<input class="txt2" type="text"/>'+'</td> <td><input id="xg" type="button"value="修改" /></td> <td><input id="del" type="button"value="删除" /></td></tr>') }) $("#tab").on("click","#del",function(){ k=$(this).parent().parent().index(); var flag = confirm ( "you sure you want to delete it?"); if(flag){ $(this).parent().parent().remove(); m=$("tr").length; for (n=k;n<m;n++) { console.log(n-1); $("#tab tr").eq(n).children().eq(0).text(n-1); } } }); $("#tab").on("blur","input[type=text]",function(){ $(this).prop('disabled',true); $(this).css({'color':'red'}) }); $("#tab").on("blur",".txt2",function(){ var bb = confirm ( "Name:" + $ ( 'txt1.') val () + "hobby:". + $ (this) .val ()); if(!bb){ $(".txt1").val(""); $(this).val(""); } }); $("#tab").on("click","#xg",function(){ $(this).parent().prevAll().children().prop('disabled',false); // alert ( "You can modify a!") }); </script> </html>