jquery实现增删改（伪）-老男孩作业day13
生活随笔
收集整理的這篇文章主要介紹了
jquery实现增删改（伪）-老男孩作业day13
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
使用jquery進(jìn)行，文件的編寫(xiě)，實(shí)現(xiàn)自增id,刪除，添加，編輯模式。
jquery放在本地，src="jquery_js.js" 可以改成其他，或者在線的路徑 readme <!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; /*透明度的問(wèn)題，加跟北京一樣的顏色，覆蓋掉最底部的顏色，然后調(diào)透明度。*//*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>愛(ài)好</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>愛(ài)好:<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><!--新增的函數(shù)-->$('.z1 button').click(function () {$('.add').removeClass('hide');})
// 提交的函數(shù),新增$('.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() //這時(shí)候由于綁定是在定義的時(shí)候發(fā)生的，所以需要重新執(zhí)行一下
del()})// 清空的函數(shù)$('.clear').click(function () {$('.add input').prop('value','');})// 退出的函數(shù)$('.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對(duì)象或者jquery對(duì)象，td是屬性的標(biāo)簽，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() //刪除標(biāo)簽
// $('.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) //雙$$符的用途，因?yàn)槿〕龅氖且粋€(gè)組的形式，拿出的是dom對(duì)象，然后在jqueryconsole.log('start_sort')}}// del()</script></body>
</html><!--比較麻煩的點(diǎn)在于，1.添加的時(shí)候的自增id的問(wèn)題，2.添加的時(shí)候，將你想要添加的節(jié)點(diǎn)做成模版的狀態(tài)，之后在向里面?zhèn)髦?#xff0c;3.設(shè)置隱藏之類的屬性的時(shí)候，
先定義一個(gè)類，在script內(nèi)寫(xiě)命令，將這個(gè)類添加到想獲得這個(gè)屬性的classlist中，4,在改的時(shí)候，將元素類型切換，變成input形式--><!--在進(jìn)行自增id功能的實(shí)現(xiàn)的時(shí)候，開(kāi)始構(gòu)想的是查找#標(biāo)簽的數(shù)量,然后添加的時(shí)候進(jìn)行+1操作，但是在進(jìn)行刪除操作的時(shí)候，一旦刪除中間的那個(gè)，之后添加會(huì)出現(xiàn)相同id的情況-->
<!--想法一：在添加操作中，for循環(huán)剔除重復(fù)的id，然后進(jìn)行重新排序.這種id可以不變，這種（暫時(shí)沒(méi)有搞）-->
<!--想法二：直接將序號(hào)列，重新排序，在刪除，添加操作之后.這種id變化。# View Code
?
轉(zhuǎn)載于:https://www.cnblogs.com/taozizainali/p/8629138.html
總結(jié)
以上是生活随笔為你收集整理的jquery实现增删改（伪）-老男孩作业day13的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Matlab图像识别/检索系列(8)—开
- 下一篇： [react] 在React中怎么引用s