溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>練習(xí)</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
.user{
color: #DFDFDF;
}
table {
border: 1px solid black;
/*修正單元格之間的邊框不能合并*/
border-collapse: collapse;
width:600px;
}
table td {
border: 1px solid black;
width: 25%;
}
table th {
border: 1px solid black;
width: 25%;
}
tbody th {
background-color: #A3BAE9;
}
.error{
border: 1px solid red;
}
.user{
color: #DFDFDF;
}
</style>
<body>
<div>
<form name="form1" id="form1" >
username:<input type="text" id="username" name='username' class="user" value="5-15數(shù)字和字母組成" />
mail:<input type="text" id="mail" name="mail" class="user" value="電子郵件/Mail" />
phone:<input type="text" id="phone" name="phone" class="user" value="電話號碼/手機(jī)" />
<input type="button" value="添加" id="add" disabled="disabled" />
<input type="reset" value="重寫" id="reset" />
</form>
</div>
<div >
<table id="table">
<tr>
<th align="center" >username</th>
<th align="center" >mail</th>
<th align="center" >phone</th>
<th align="center" >操作</th>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="編輯" name="editInput" />
<input type="button" value="刪除" name="delInput" />
</td>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="編輯" name="editInput" />
<input type="button" value="刪除" name="delInput" />
</td>
</tr>
<tr>
<td align="center" class="userval">huangyanxiong</td>
<td align="center" class="userval">huang@qq.com</td>
<td align="center" class="userval">12345678912</td>
<td align="center" class="userval">
<input type="button" value="編輯" name="editInput" />
<input type="button" value="刪除" name="delInput" />
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
/*
1版后話:這樣會存在一個問題就是表格中已經(jīng)存在一些原有的表格行數(shù)據(jù)并且沒有按過添加按鈕時(shí)時(shí)就不能進(jìn)行編輯和刪除，需要對代碼進(jìn)行調(diào)整
2版問題：這樣會造成點(diǎn)擊一次編輯或者刪除按鈕會變成兩次按鈕，而且代碼不能復(fù)用
3版(this):利用函數(shù)解決代碼復(fù)用，但是jquery不支持這樣做
4版使用jquery的插件方案，解決代碼不能復(fù)用的問題，但是沒有解決點(diǎn)擊一次變成兩次的問題
5將1234版遺留問題解決，解決方法就是 采用jquery的事件委派來解決---live();jQuery 給所有匹配的元素附加一個事件處理函數(shù)，即使這個元素是以后再添加進(jìn)來的也有效。
6版：新增功能雙擊可以編輯表格失敗告終，搞出一堆問題，事件委派live()的特點(diǎn)會將所有元素都添加上事件(jquery叫冒泡)，會冒泡到dom樹的最頂層，實(shí)在太夸張了，還有最后一個問題
7版：暫時(shí)不解決6版的問題實(shí)在想不到怎么搞，完成雙擊編輯表格
8版：添加驗(yàn)證程序
*/
/*
委派點(diǎn)擊事件給選擇器匹配的編輯按鈕
*/
$(document).on('click','input[name="editInput"]',function(){
var i=1;
if ($(this).val()=='編輯') {
$(this).parent().siblings().each(function(){
$(this).html('<input type="text" value='+'"'+$(this).text()+'"'+''+' />');
i++;
});
$(this).val('保存');
return false;
};
if ($(this).val()=='保存') {
$(this).parent().siblings().each(function(){
$(this).text($(this).children().val());
i++;
});
$(this).val('編輯');
return false;
};
});
/*
委派點(diǎn)擊事件給選擇器匹配刪除按鈕
*/
$(document).on('click','input[name="delInput"]',function(){
if (confirm('確定要刪除嗎')) {
$(this).parent().parent().remove(); //jquery最大特點(diǎn)可以自己刪除自己
};
});
/*
給添加按鈕定義一個點(diǎn)擊事件，并且獲取用戶值創(chuàng)建表格行進(jìn)行存儲
*/
$('#add').click(function(){
var td=new Array();
var editInput="<input type='button' value='編輯' name='editInput'/>";
var delInput="<input type='button' value='刪除' name='delInput'/>";
var i=0;
console.info($('input[class="user"]')); //把注釋去掉后你將會在調(diào)試工具的控制臺看到一件不可思議的事情，你會很驚訝的發(fā)現(xiàn)選擇到的是document
$(this).prevAll().each(function(){
td[i]="<td align='center' class='userval'>"+$(this).val()+"</td>"; //專門獲取屬性值
i++;
$(this).addClass('user');
});
$('th[align="center"]').parent().after('<tr>'+td.join('')+"<td align='center'>"+editInput+' '+delInput+"</td>"+'</tr>');
$('#reset').click();
});
//找到所有的需要綁定事件的td并且把這些td里面含有input 元素的td排除,并且委派雙擊事件 find（）方法適合找個一個元素里面包含的元素
/*Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object]) jquery-1.8.3.min.js:2
nt.error jquery-1.8.3.min.js:2
ut jquery-1.8.3.min.js:2
vt jquery-1.8.3.min.js:2
g.querySelectorAll.vt jquery-1.8.3.min.js:2
nt jquery-1.8.3.min.js:2
v.event.dispatch jquery-1.8.3.min.js:2
v.event.add.o.handle.u
*/
//editTd=$('td[align="center"]').not($('td[align="center"]').find('input').parent()); 當(dāng)我點(diǎn)擊這里會提示出錯，如下
//error:Uncaught Error: Syntax error, unrecognized expression: td[align="center"].not([object Object]) 只能用class來取代
$(document).on('dblclick','td[class="userval"]',function(){
//這個判斷是防止用戶再次進(jìn)行雙擊把值清空
if (!$(this).children().length) {
$(this).html('<input type="text" value='+'"'+$(this).text()+'"'+''+' />');
$(this).children().focus();
var value=$(this).children().val();
$(this).children().val('');
$(this).children().val(value);
$(this).focusout(function(){
$(this).text($(this).children().val());
});
};
});
/*
由于jquery沒有進(jìn)行驗(yàn)證的方法就只能添加方法，為了使代碼可以復(fù)用，將會使用jquery的充對象
*/
jQuery.extend({
/*
驗(yàn)證用戶名
*/
checkUserName: function(val){
var exp=new RegExp('[a-z0-9]{5,15}','i');
return exp.test(val);
},
/*
驗(yàn)證電子郵件
*/
checkMail: function(val){
var exp=new RegExp('^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$','i');
return exp.test(val);
},
/*
驗(yàn)證電話號碼
*/
checkPhone: function(val){
var exp=new RegExp('^[0-9]{11}$','i');
return exp.test(val);
},
/*
清除初始值和恢復(fù)初始值
*/
intval: function(_this,str){
var string=str;
if ($(_this).val()==string) {
$(_this).val('');
$(_this).removeClass('user');
};
$(_this).focusout(function(){
if (!$(_this).val()) {
$(_this).val(string);
$(_this).addClass('user');
};
});
},
/*
切換class
*/
switchClass: function(_this,bool){
if (!bool) {
$(_this).addClass("error");
}else{
$(_this).removeClass('error');
}
},
/*
移除disabled
*/
submitAdd: function(){
if (userbool && phonebool && mailbool) {
$('#add').removeAttr('disabled');
};
}
});
/*
驗(yàn)證用戶名，錯誤把邊框設(shè)置為紅色
*/
$('input[name="username"]').change(function(){
userbool=jQuery.checkUserName($(this).val());
jQuery.switchClass($(this),userbool);
jQuery.submitAdd();
});
/*
驗(yàn)證電子郵件，錯誤把邊框設(shè)置為紅色
*/
$('input[name="mail"]').change(function(){
mailbool=jQuery.checkMail($(this).val());
jQuery.switchClass($(this),mailbool);
jQuery.submitAdd();
});
/*
驗(yàn)證電話號碼，錯誤把邊框設(shè)置為紅色
*/
$('input[name="phone"]').change(function(){
phonebool=jQuery.checkPhone($(this).val());
jQuery.switchClass($(this),phonebool);
jQuery.submitAdd();
});
/*
初始值
*/
$('input[name="username"]').focus(function(){
var str="5-15數(shù)字和字母組成";
jQuery.intval($(this),str);
});
/*
初始值
*/
$('input[name="mail"]').focus(function(){
var str="電子郵件/Mail";
jQuery.intval($(this),str);
});
/*
初始值
*/
$('input[name="phone"]').focus(function(){
var str="電話號碼/手機(jī)";
jQuery.intval($(this),str);
});
var userbool=false;
var mailbool=false;
var phonebool=false;
});
</script>
</html>免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼