jquery版本的動(dòng)態(tài)編輯表格一
<!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;
}
</style>
<body>
<div>
<form name="form1" id="form1" >
username:<input type="text" id="username" name='user' />
mail:<input type="text" id="mail" name="user" />
phone:<input type="text" id="phone" name="user" />
<input type="button" value="添加" id="add" />
</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">huangyanxiong</td>
<td align="center">huang@qq.com</td>
<td align="center">12345678912</td>
<td align="center">
<input type="button" value="編輯" name="editInput">
<input type="button" value="刪除" name="delInput">
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
/*
一開始以為做一個(gè)可以動(dòng)態(tài)編輯的表格很簡(jiǎn)單，雖然開始的時(shí)候用javascript做過(guò)一次，
在jquery下又是不一樣的了，可是做起來(lái)之后問(wèn)題真的很多，
而且還很難解決，不斷的要看文檔，但是沒有辦法，不然我現(xiàn)在還對(duì)jquery不是很熟悉
，就是希望通過(guò)自己寫簡(jiǎn)單的項(xiàng)目來(lái)試試手，增加自己對(duì)jquery的熟悉度，如果你也跟著做下去相信你會(huì)漲姿勢(shì)的了，
以下我剛寫完第一個(gè)的版本的jquery編輯表格遇到的問(wèn)題，以前老師講的都是皮毛，只是知道一兩個(gè)簡(jiǎn)單的選擇器，再加一些
簡(jiǎn)單的方法，并沒有怎么深入，現(xiàn)在自己就深入了解，沒有想到j(luò)query還真多東西研究的
這樣會(huì)存在一個(gè)問(wèn)題就是表格中已經(jīng)存在一些原有的表格行數(shù)據(jù)并且沒有按過(guò)添加按鈕時(shí)時(shí)就不能進(jìn)行編輯和刪除，需要對(duì)代碼進(jìn)行調(diào)整
*/
/*
給添加按鈕定義一個(gè)點(diǎn)擊事件，并且獲取用戶值創(chuàng)建表格行進(jìn)行存儲(chǔ)
*/
$('#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;
$("input[name='user']").each(function(){
td[i]="<td align='center'>"+$(this).val()+"</td>"; //專門獲取屬性值
i++;
});
$('#table').append('<tr>'+td.join('')+"<td align='center'>"+editInput+' '+delInput+"</td>"+'</tr>');
console.info($('form[name="form1"]'));
/*
為刪除按鈕添加點(diǎn)擊事件并刪除表格行
*/
$("input[name='delInput']").click(function(){
if (confirm('確定要?jiǎng)h除嗎')) {
$(this).parent().parent().remove(); //jquery最大特點(diǎn)可以自己刪除自己
};
});
/*
為刪除按鈕添加點(diǎn)擊事件并編輯和保存表格行
*/
$("input[name='editInput']").click(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;
};
});
});
});
</script>
</html>
新聞標(biāo)題：jquery版本的動(dòng)態(tài)編輯表格一
本文URL：http://www.rwnh.cn/article34/jepgpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、App設(shè)計(jì)、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)、標(biāo)簽優(yōu)化
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
