使用jquery進行，文件的編寫，實現自增id,刪除，添加，編輯模式。
jquery放在本地，src="jquery_js.js" 可以改成其他，或者在線的路徑 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>彈出輸入，增刪改查</title><script src="jquery_js.js"></script><style>.under{height: 1000px;background-color: white;}.add{width: 100%;background-color: white;height:1000px;opacity: 0.8; /*透明度的問題，加跟北京一樣的顏色，覆蓋掉最底部的顏色，然后調透明度。*//*position: fixed;*//*margin-top: 0px;*/top: 0px;position: fixed;z-index: 778;}.hide{display:none;}#f{position: fixed;top: 50%;left: 50%;z-index: 888;background-color: white;opacity: 1;}#f p{}</style> </head> <body> <div class="under"><div class="z1"><button type="button">新增</button></div><table border="1"><thead><tr><td>#</td><td>姓名</td><td>愛好</td><td>操作</td></tr></thead><tbody class="tbody"><tr class="test"><td class="fix">1</td><td >周奕明</td><td>play</td><td><button class="edit" type="button">編輯</button><button class="del">刪除</button></td></tbody></table> </div> <div class="add hide"><form id="f" action=""><p>名字:<input type="text" value=""></p><p>愛好:<input type="text" value=""></p><!--<button class="put_up" style="margin-left:30px " type="button">提交</button>--><button class="put_up" style="margin-left:30px " type="button" value="提交">提交</button><button class="clear" style="margin-left: 20px" type="button">清空</button><button class="quit" style="margin-left: 20px">退出</button></form> </div><script><!--新增的函數-->$('.z1 button').click(function () {$('.add').removeClass('hide');}) // 提交的函數,新增$('.put_up').click(function () {var user_put = $($('.add input')[0]).prop('value')var hobby_put = $($('.add input')[1]).prop('value')var arr=[];arr.push(user_put)arr.push(hobby_put)num2 = $('.tbody tr').lengths= '<tr> <td class="fix">num</td> <td>user</td> <td>hobby</td> <td> <button class="edit" type="button">編輯</button> <button class="del">刪除</button> </td></tr>'s= s.replace('num',num2+1)s= s.replace('user',user_put)s=s.replace('hobby',hobby_put)$('.add').addClass('hide')$('.tbody').append(s)edit() //這時候由于綁定是在定義的時候發生的，所以需要重新執行一下 del()})// 清空的函數$('.clear').click(function () {$('.add input').prop('value','');})// 退出的函數$('.quit').click(function () {$('.add').addClass('hide');})//編輯function edit() {$('.edit').click(function () {console.log($('.edit'))console.log(this)fix = $('.fix')console.log($(this).parent().prevUntil(fix,'td')) //!!fix是dom對象或者jquery對象，td是屬性的標簽，until不包含尾部temp = $(this).parent().prevUntil(fix,'td')temp.html('<input type="text">')})}edit() //刪除function del() {$('.del').click(function () {console.log($(this).parent().parent())console.log( $('.tbody'))$(this).parent().parent().remove() //刪除標簽 // $('.tbody').remove($(this).parent().parent()) // $('tr').remove('$(this).parent().parent()'); // console.log($(this).parent().parent()) so_rt()})}function so_rt() {for (var k=0;k<$('.fix').length;k++){$($('.fix')[k]).text(k+1) //雙$$符的用途，因為取出的是一個組的形式，拿出的是dom對象，然后在jqueryconsole.log('start_sort')}}// del()</script></body> </html><!--比較麻煩的點在于，1.添加的時候的自增id的問題，2.添加的時候，將你想要添加的節點做成模版的狀態，之后在向里面傳值，3.設置隱藏之類的屬性的時候， 先定義一個類，在script內寫命令，將這個類添加到想獲得這個屬性的classlist中，4,在改的時候，將元素類型切換，變成input形式--><!--在進行自增id功能的實現的時候，開始構想的是查找#標簽的數量,然后添加的時候進行+1操作，但是在進行刪除操作的時候，一旦刪除中間的那個，之后添加會出現相同id的情況--> <!--想法一：在添加操作中，for循環剔除重復的id，然后進行重新排序.這種id可以不變，這種（暫時沒有搞）--> <!--想法二：直接將序號列，重新排序，在刪除，添加操作之后.這種id變化。#
?
