jquery 版本的動(dòng)態(tài)編輯表格四

發(fā)布時(shí)間：2020-07-13 17:19:34 來源：網(wǎng)絡(luò) 閱讀：229 作者：huangyanxiong 欄目：web開發(fā)

<!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(){
/*
1版后話:這樣會(huì)存在一個(gè)問題就是表格中已經(jīng)存在一些原有的表格行數(shù)據(jù)并且沒有按過添加按鈕時(shí)時(shí)就不能進(jìn)行編輯和刪除，需要對(duì)代碼進(jìn)行調(diào)整
2版問題：這樣會(huì)造成點(diǎn)擊一次編輯或者刪除按鈕會(huì)變成兩次按鈕，而且代碼不能復(fù)用
3版(this):利用函數(shù)解決代碼復(fù)用，但是jquery不支持這樣做
4版使用jquery的插件方案，解決代碼不能復(fù)用的問題，但是沒有解決點(diǎn)擊一次變成兩次的問題
*/
jQuery.fn.extend({
 check: function() {
  return this.each(function() { this.checked = true; });
 },
 uncheck: function() {
 return this.each(function() { this.checked = false; });
 },
adduser: function(){
$('#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>');
$('#add').delInput();
$('#add').adduser();
});
},
delInput: function(){
$("input[name='delInput']").click(function(){
if (confirm('確定要?jiǎng)h除嗎')) {
$(this).parent().parent().remove();  //jquery最大特點(diǎn)可以自己刪除自己
};
});
},
editInput: function (){
$("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;
};
});
}
});
$('#add').editInput();
$('#add').delInput();
$('#add').adduser();
});
</script>
</html>

向AI問一下細(xì)節(jié)

jquery 版本的動(dòng)態(tài)編輯表格 四

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

jquery 版本的動(dòng)態(tài)編輯表格四