<!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>
jQ的增刪改查
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門肾档,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摹恰,“玉大人,你說我怎么就攤上這事怒见∷状龋” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵遣耍,是天一觀的道長闺阱。 經(jīng)常有香客問我,道長舵变,這世上最難降的妖魔是什么酣溃? 我笑而不...
- 正文 為了忘掉前任瘦穆,我火速辦了婚禮,結(jié)果婚禮上赊豌,老公的妹妹穿的比我還像新娘扛或。我一直安慰自己,他們只是感情好碘饼,可當(dāng)我...
- 文/花漫 我一把揭開白布熙兔。 她就那樣靜靜地躺著,像睡著了一般艾恼。 火紅的嫁衣襯著肌膚如雪住涉。 梳的紋絲不亂的頭發(fā)上,一...
- 文/蒼蘭香墨 我猛地睜開眼毙芜,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了争拐?” 一聲冷哼從身側(cè)響起,我...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡绑雄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了奥邮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片万牺。...
- 正文 年R本政府宣布核无,位于F島的核電站,受9級特大地震影響藕坯,放射性物質(zhì)發(fā)生泄漏团南。R本人自食惡果不足惜噪沙,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吐根。 院中可真熱鬧正歼,春花似錦、人聲如沸拷橘。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽膜楷。三九已至旭咽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赌厅,已是汗流浹背穷绵。 一陣腳步聲響...
- 正文 我出身青樓,卻偏偏與公主長得像揍障,于是被迫代替她去往敵國和親目养。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 找到fullcalendar.js毒嫡, 找到代碼為 isRTL:false癌蚁,這句話 輸入以下幾句 monthName...
- 簡述JavaScript起源起源于美國的Netscape公司,原名為LiveScript肛鹏,后改為JavaScrip...
- 風(fēng)雨如晦 你如驚鴻翩然 剎那的閃現(xiàn) 仿佛永恒的光影 深深烙下 吉光片羽的印記 “既見君子, 云胡不喜健田?” 你低頭呢...