使用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').length s= '<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对象,然后在jquery console.log('start_sort') } } // del() </script> </body> </html> <!--比较麻烦的点在于,1.添加的时候的自增id的问题,2.添加的时候,将你想要添加的节点做成模版的状态,之后在向里面传值,3.设置隐藏之类的属性的时候, 先定义一个类,在script内写命令,将这个类添加到想获得这个属性的classlist中,4,在改的时候,将元素类型切换,变成input形式--> <!--在进行自增id功能的实现的时候,开始构想的是查找#标签的数量,然后添加的时候进行+1操作,但是在进行删除操作的时候,一旦删除中间的那个,之后添加会出现相同id的情况--> <!--想法一:在添加操作中,for循环剔除重复的id,然后进行重新排序.这种id可以不变,这种(暂时没有搞)--> <!--想法二:直接将序号列,重新排序,在删除,添加操作之后.这种id变化。#