CSS設計表格（中）--jQuery實現刪除指定行

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前言

上一節，利用CSS實現了一個樣式表格，增加了全選功能，本節利用jQuery實現刪除指定行功能。如下效果圖：

本章範例程式碼點此下載

實現代碼

table3.html內容

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Table刪除行</title><style type="text/css">body{margin: 0;}.main{width: 600px;margin-top: 10px;margin-left:auto;margin-right:auto;}.table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0}.table th,.table td{padding:8px;line-height:20px;text-align: center;}.table-border{border-top:1px solid #ddd;}.table-border th,.table-border td{border-bottom: 1px solid #ddd;}.table-bg thead{background-color: #f5fafe;}.tableselected{background-color: #f5fafe;}.table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0}.table-bordered th,.table-bordered td{border-left:1px solid #ddd}.table-border.table-bordered{border-bottom:0}.table-hover tbody tr:hover td{background-color:#f5f5f5}</style></head><body><div class="main" ><table class="table table-border table-bordered table-bg  table-hover"><thead><tr><th width="25"><input type="checkbox" name="" value="" ></th><th width="75">ID</th><th width="120">使用者名稱</th><th width="80">性別</th><th width="130">電話</th><th width="170">操作</th></tr></thead><tbody><tr ><td><input type="checkbox" value="1" name=""></td><td>1</td><td>張三</td><td>男</td><td>123456789</td><td ><a title="刪除" onClick="article_del(this)" href="javascript:;">刪除</a></td></tr><tr ><td><input type="checkbox" value="1" name=""></td><td>2</td><td>李四</td><td>男</td><td>123456789</td><td ><a title="刪除" onClick="article_del(this)" href="javascript:;">刪除</a></td></tr><tr ><td><input type="checkbox" value="1" name=""></td><td>3</td><td>王五</td><td>男</td><td>123456789</td><td ><a title="刪除" onClick="article_del(this)" href="javascript:;">刪除</a></td></tr></tbody></table></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">/*checkbox全選*/$("table thead th input:checkbox").on("click" ,function(){$(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked"));});$("table tbody tr input:checkbox").on("click",function(){var ischeck = $(this).prop("checked");if(ischeck == false){$(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked"));}});/*刪除*/function article_del(obj){var res = confirm('確認要刪除嗎。');if(res == true){$(obj).parents("tr").remove();}}</script></body></html>

對比上節的table2.html內容，只增加了幾行代碼，首先針對<a></a>作了如下變動

其中onClick很明顯為<a>的點擊事件執行的函數。

其中href="javascript:;"可能初學者有些不瞭解。<a>標籤的href屬性用於指定超連結目標的URL，href屬性的值可以是任何有效文檔的相對或絕對URL，包括片段標識符和JavaScript程式碼片段。這裡的href="javascript:;"，其中javascript:是偽協議，它可以讓我們通過一個連結來調用javascript函數，而採用這個方式javascript:;可以實現A標籤的點擊事件運行時，如果頁面內容很多，有捲軸時，頁面不會亂跳，使用者體驗更好。或許你會想到，用href="#"，我只能說，試試~

結語

下節寫動態添加行

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More