jQuery實作動态添加tr到table的方法

2023-08-06 06:05:55

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>添加使用者</title>

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

<center>

<br><br>

添加使用者:<br><br>

姓名: <input type="text" name="name" id="name" />

email: <input type="text" name="email" id="email" />

電話: <input type="text" name="tel" id="tel" /><br><br>

<button id="addUser">送出</button>

<br><br>

<hr>

<br><br>

<table id="usertable" cellpadding="5" cellspacing=0>

<tbody>

<tr>

<th>姓名</th>

<th>email</th>

<th>電話</th>

<th> </th>

</tr>

<tr>

<td>Tom</td>

<td>[email protected]</td>

<td>5000</td>

<td><a href="deleteEmp?id=Tom" target="_blank" rel="external nofollow" >Delete</a></td>

</tr>

<tr>

<td>Jerry</td>

<td>[email protected]</td>

<td>8000</td>

<td><a href="deleteEmp?id=Jerry" target="_blank" rel="external nofollow" >Delete</a></td>

</tr>

</tbody>

</table>

</center>

</body>

<script>

$(document).ready(function(){

$("#addUser").click(function(){

var name = $("#name").val();

var email = $("#email").val();

var tel = $("#tel").val();

var $tr = $("<tr>"+

"<td>"+name+"</td>"+

"<td>"+email+"</td>"+

"<td>"+tel+"</td>"+

"<td><a href='deleteEmp?id="+name+"'>删除</a></td>"

+"</tr>");

var $table = $("#usertable");

$table.append($tr);

$tr.children().children().click(function(){

//alert($(domEle).parent().parent().children(":first").text());

//方法1.

// $(domEle).parent().parent().remove();

// return false;

//方法2.

return deleteTr($tr);

});

//不能在這裡給每個<a> 加事件，每add一次就each一次，會重複彈出confirm

// $("tr td a").each(function(index,domEle){

// $(domEle).click(function(){

// //alert($(domEle).parent().parent().children(":first").text());

// //方法1.

$(domEle).parent().parent().remove();

return false;

// //方法2.

// return deleteTr($(domEle).parent().parent());

// });

//

// });

});

function deleteTr(aObject) {

var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名稱的值嗎？");

// alert(flag);

if(!flag){

return false;

} else {

aObject.remove();

return false;

}

return false;

}

})

</script>

</html>

網站 jQuery實作動态添加tr到table

上一篇: Visual Studio 2008 Downloads

下一篇: jquery動态追加html資料,jQuery動态追加頁面資料以及事件委托詳解 Photo Gallery Photo Gallery

繼續閱讀