jQ的增刪改查

<!DOCTYPE html>

<html>

? ? <head>

? ? ? ? <meta charset="UTF-8">

? ? ? ? <title></title>

? ? ? ? <style type="text/css">

? ? ? ? ? ? a{

? ? ? ? ? ? ? ? text-decoration: none;

? ? ? ? ? ? ? ? cursor: pointer;

? ? ? ? ? ? ? ? color: palevioletred;

? ? ? ? ? ? }

? ? ? ? </style>

? ? </head>

? ? <body>

? ? ? ? <a href="javascript:addUser();">添加用戶</a>

? ? ? ? <input type="text" id="findInp"/>

? ? ? ? <a id="findUser">查找用戶</a>

? ? ? ? <table border="1" cellspacing="0" cellpadding="3">

? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? <th>ID</th>

? ? ? ? ? ? ? ? <th>用戶名</th>

? ? ? ? ? ? ? ? <th>密碼</th>

? ? ? ? ? ? ? ? <th>操作</th>

? ? ? ? ? ? </tr>

? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? <td>1001</td>

? ? ? ? ? ? ? ? <td>張三</td>

? ? ? ? ? ? ? ? <td>123asd</td>

? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? <a id="up">更新</a>

? ? ? ? ? ? ? ? ? ? <a id="del">刪除</a>

? ? ? ? ? ? ? ? ? ? <a class="up">上移</a>

? ? ? ? ? ? ? ? ? ? <a class="down">下移</a>

? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? </tr>

? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? <td>1002</td>

? ? ? ? ? ? ? ? <td>李四</td>

? ? ? ? ? ? ? ? <td>456zxc</td>

? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? <a id="up">更新</a>

? ? ? ? ? ? ? ? ? ? <a id="del">刪除</a>

? ? ? ? ? ? ? ? ? ? <a class="up">上移</a>

? ? ? ? ? ? ? ? ? ? <a class="down">下移</a>

? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? </tr>

? ? ? ? </table>

? ? ? ? <div id="addUser" style="display: none;">

? ? ? ? ? ? <form>

? ? ? ? ? ? ? ? ID:(只能是數(shù)字) <br />

? ? ? ? ? ? ? ? <input type="number" id="uid"/><br />

? ? ? ? ? ? ? ? 用戶名:(只能是漢字) <br />

? ? ? ? ? ? ? ? <input type="text" id="user"/><br />

? ? ? ? ? ? ? ? 密碼:(英文+數(shù)字或下劃線翻擒,長度不小于6) <br />

? ? ? ? ? ? ? ? <input type="text" id="pwd"/><br />

? ? ? ? ? ? ? ? <a id="btn-add">提交</a>

? ? ? ? ? ? ? ? <a id="btn-update">更新</a>

? ? ? ? ? ? ? ? <a id="cancel">取消</a>

? ? ? ? ? ? </form>

? ? ? ? </div>

? ? ? ? <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

? ? ? ? <script src="js/prac1.js" type="text/javascript" charset="utf-8"></script>

? ? </body>

</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">

//刪除當(dāng)前行

//用事件委托實現(xiàn)亥贸,否則點(diǎn)擊一次后會失效

$('table').on('click','#del',function(){

? ? $(this).parents('tr').remove();

? ? //$(this).parent().parent().remove(); 同上

? ? //parent() parents()的區(qū)別就是前者獲取的只有它的上一級元素

? ? //后者把它的所有上級元素都獲取了搭伤,不過可以明確指定獲取哪一級

});

//初始化

function init(){

? ? $('input').val('');

};

//顯示隱藏的表單框

function addUser(){

? ? init();

? ? //show()里面的參數(shù)是動畫執(zhí)行的時間凸丸,可有可無,也可加一個回調(diào)函數(shù),hide()同理

? ? $('#addUser').show(1000);

? ? $('#btn-add').show();

? ? $('#btn-update').hide();

? ? console.log($('#uid').val());

};

$('#cancel').click(function(){

? ? $('#addUser').hide(1000);

? ? init();

});

//提交驗證

//定義一個全局變量九默,判斷操作是否成功

var result=false;

$('#btn-add').click(function(){

? ? msg();

? ? if(result){

? ? ? ? $('#addUser').hide(1000);

? ? }

})

function msg(){

? ? var val1=$('#uid').val();

? ? var val2=$('#user').val();

? ? var val3=$('#pwd').val();

? ? //正則驗證

? ? var reg_user = /^[\u0391-\uFFE5]+$/;

? ? var reg_pwd = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;

? ? if(val1==''){

? ? ? ? result=false;

? ? ? ? alert('請輸入ID')

? ? }else if(val2==''){

? ? ? ? result=false;

? ? ? ? alert('請輸入用戶名')

? ? }else if(val3==''){

? ? ? ? result=false;

? ? ? ? alert('請輸入密碼')

? ? }else if(!reg_user.test(val2)){

? ? ? ? result=false;

? ? ? ? alert('用戶名格式不正確')

? ? }else if(!reg_pwd.test(val3)){

? ? ? ? result=false;

? ? ? ? alert('密碼格式不正確')

? ? }else{

? ? ? ? result=true;

? ? };

? ? if(result){

? ? ? ? push();

? ? };

}

//把信息添加到相應(yīng)表格內(nèi)

function push(){

? ? //創(chuàng)建tr節(jié)點(diǎn)

? ? var $tr=$('<tr></tr>')

? ? //遍歷獲取input中的內(nèi)容依次填到td中

? ? //第一個參數(shù)是索引蒸殿,第二個參數(shù)是數(shù)據(jù)對象

? ? //如果是json格式的話,第一個參數(shù)是鍵恬总,第二個是值

? ? $('form input').each(function(index,domEle){

? ? ? ? //添加td節(jié)點(diǎn)

? ? ? ? var $td=$('<td></td>');

? ? ? ? //將內(nèi)容循環(huán)添加到創(chuàng)建好的td中

? ? ? ? $td.append($(domEle).val());

? ? ? ? //將td添加到創(chuàng)建的tr中

? ? ? ? $td.appendTo($tr);

? ? });

? ? //創(chuàng)建td的刪除更新按鈕

? ? var $td=$("<td><a id='up'>更新</a> <a id='del'>刪除</a> <a class='up'>上移</a> <a class='down'>下移</a></td> ");

? ? $td.appendTo($tr);

? ? //最后將創(chuàng)建的tr插入到table中的最后一個位置

? ? $tr.appendTo('table');

}

//更新操作

//定義全局變量前普,用于存放要修改的行號

var row=0

$('table').on('click','#up',function(){

? ? $('#addUser').show(1000);

? ? $('#btn-add').hide();

? ? $('#btn-update').show();

? ? //獲取最后一個td前面所有的td節(jié)點(diǎn)

? ? var val=$(this).parent().prevAll();

? ? var arr=[];

? ? //通過循環(huán)將所有td里面的文本放到數(shù)組里面

? ? for(var i=0;i<val.length;i++){

? ? ? ? arr[arr.length]=val.eq(i).text();

? ? };

? ? //得到的arr數(shù)組與表格順序相反

? ? //將arr數(shù)組逆序與表格順序相同,以便依次填到input中

? ? var arr1=arr.reverse();

? ? for(var j=0;j<$('form input').length;j++){

? ? ? ? $('form input').eq(j).val(arr1[j])

? ? };

? ? //i是該行所在的行號

? ? var i=$('table').find("tr").index(val.parent()[0]);

? ? console.log(i);

? ? row=i;

});

//更新驗證

$('#btn-update').on('click',function(){

? ? console.log($(this));

? ? msg();

? ? $('#addUser').hide(1000);

? ? //過濾器 過濾索引壹堰,過濾出行號為row的tr拭卿,并移除

? ? $('tr').filter(function(index){

? ? ? ? return index==row

? ? }).remove();

});

//查找操作

$('#findUser').on('click',function(){

? ? //記錄Input框中輸入的值用于查找

? ? var val=$('#findInp').val();

? ? console.log(val);

? ? var arr=[];

? ? //通過循環(huán)將第一列td的值存入到數(shù)組中

? ? for(var i=0;i<$("tr").find("td:first").length;i++){

? ? ? ? arr[arr.length]=$("tr").find("td:first").eq(i).text();

? ? };

? ? //通過循環(huán)判斷input中輸入的值,在表格中是否存在

? ? for(var j=0;j<arr.length;j++){

? ? ? ? if(arr[j]==val){

? ? ? ? ? ? result=true

? ? ? ? ? ? //記錄其所在的行號

? ? ? ? ? ? var z=j;

? ? ? ? }

? ? };

? ? //置頂操作

? ? //如果存在的話贱纠,就將該行置頂

? ? if(result){

? ? ? ? console.log(z);

//? ? ? $('tr:nth-child('+z+1+')').css('background-color','#2D93CA');同下兩行

? ? ? ? var $tr=$('tr').eq(z+1)

? ? ? ? $tr.css('background-color','#2D93CA');

? ? ? ? //淡入淡出的一個動畫

? ? ? ? $tr.fadeOut().fadeIn();

? ? ? ? //prepend() 在被選元素的開頭插入指定的內(nèi)容

? ? ? ? $('table').prepend($tr);

? ? }

? ? else{

? ? ? ? alert('不存在該用戶峻厚,請確認(rèn)您輸入的ID是否正確')

? ? }

})

//上移操作

$('table').on('click','.up',function(){

? ? //.parents('tr') 找到父親為tr的節(jié)點(diǎn)

? ? var $tr=$(this).parents('tr');

? ? console.log($tr);

? ? //判斷當(dāng)前行是否是第一行

? ? if($tr.index()!=0){

? ? ? ? $tr.fadeOut().fadeIn();

? ? ? ? //prev() 獲得匹配元素集合中每個元素緊鄰的前一個同胞元素

? ? ? ? //before() 在被選元素的前面插入指定的內(nèi)容

? ? ? ? $tr.prev().before($tr);

? ? }

})

//下移操作

$('table').on('click','.down',function(){

? ? //獲取一共多少行

? ? var length1=$('tr').length;

? ? var $tr=$(this).parents('tr');

? ? console.log(length1);

? ? //如果當(dāng)前行是最后一行,則不再往下移

? ? if($tr.index()!=length1-1){

? ? ? ? $tr.fadeOut().fadeIn();

? ? ? ? //next() 獲得匹配元素集合中每個元素緊鄰的后一個同胞元素

? ? ? ? //after() 在被選元素的后面插入指定的內(nèi)容

? ? ? ? $tr.next().after($tr);

? ? }

})

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谆焊,一起剝皮案震驚了整個濱河市惠桃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辖试,老刑警劉巖辜王,帶你破解...
    沈念sama閱讀 219,539評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異罐孝,居然都是意外死亡呐馆,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評論 3 396
  • 文/潘曉璐 我一進(jìn)店門肾档,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摹恰,“玉大人,你說我怎么就攤上這事怒见∷状龋” “怎么了?”我有些...
    開封第一講書人閱讀 165,871評論 0 356
  • 文/不壞的土叔 我叫張陵遣耍,是天一觀的道長闺阱。 經(jīng)常有香客問我,道長舵变,這世上最難降的妖魔是什么酣溃? 我笑而不...
    開封第一講書人閱讀 58,963評論 1 295
  • 正文 為了忘掉前任瘦穆,我火速辦了婚禮,結(jié)果婚禮上赊豌,老公的妹妹穿的比我還像新娘扛或。我一直安慰自己,他們只是感情好碘饼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評論 6 393
  • 文/花漫 我一把揭開白布熙兔。 她就那樣靜靜地躺著,像睡著了一般艾恼。 火紅的嫁衣襯著肌膚如雪住涉。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評論 1 307
  • 那天钠绍,我揣著相機(jī)與錄音舆声,去河邊找鬼。 笑死柳爽,一個胖子當(dāng)著我的面吹牛媳握,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播磷脯,決...
    沈念sama閱讀 40,468評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼毙芜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了争拐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤晦雨,失蹤者是張志新(化名)和其女友劉穎架曹,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體闹瞧,經(jīng)...
    沈念sama閱讀 45,850評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡绑雄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奥邮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片万牺。...
    茶點(diǎn)故事閱讀 40,144評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖洽腺,靈堂內(nèi)的尸體忽然破棺而出脚粟,到底是詐尸還是另有隱情,我是刑警寧澤蘸朋,帶...
    沈念sama閱讀 35,823評論 5 346
  • 正文 年R本政府宣布核无,位于F島的核電站,受9級特大地震影響藕坯,放射性物質(zhì)發(fā)生泄漏团南。R本人自食惡果不足惜噪沙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吐根。 院中可真熱鬧正歼,春花似錦、人聲如沸拷橘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽膜楷。三九已至旭咽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赌厅,已是汗流浹背穷绵。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留特愿,地道東北人仲墨。 一個月前我還...
    沈念sama閱讀 48,415評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像揍障,于是被迫代替她去往敵國和親目养。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評論 2 355

推薦閱讀更多精彩內(nèi)容