jQuery删除table指定行_table删除指定行资源-CSDN下载

共4个文件

html：3个

js：1个

需积分: 49 123 浏览量 2015-12-13 15:12:37 上传评论收藏 34KB RAR 举报

在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对表格（table）的操作。本文将深入探讨如何使用jQuery来删除HTML表格中的指定行。理解HTML表格的基本结构至关重要。一个表格由`<table>`元素构成，包含`<tr>`（表格行）元素，而每一行内又包含`<td>`（表格数据）或`<th>`（表头）元素。如果我们想要删除特定行，就需要找到这个行并将其从DOM中移除。 jQuery提供了`remove()`方法，用于从DOM中删除匹配的元素。删除表格中指定行的关键在于定位到这一行。我们可以使用类选择器、ID选择器或者索引选择器来实现。例如，假设我们有一个表格，其中的行都有唯一的类名，如`"myRow"`，我们可以通过以下方式删除类名为`"myRow"`的行： ```javascript $('.myRow').remove(); ``` 如果我们要根据行号删除行，例如删除第二行（行号从0开始），可以这样做： ```javascript $('tr:eq(1)').remove(); ``` 这里的`:eq(index)`是jQuery的选择器，用于选取具有指定索引的元素。然而，如果你没有行的唯一标识符，可能需要遍历表格行并根据某些条件删除。例如，删除所有包含特定文本的行： ```javascript $('tr').each(function() { if ($(this).text() === '要删除的文本') { $(this).remove(); } }); ``` 在实际应用中，你可能会遇到更复杂的情况，比如需要在用户点击按钮时删除行。这可以通过事件监听来实现： ```html <button id="deleteButton">删除</button> ``` ```javascript $('#deleteButton').click(function() { // 删除操作在这里执行 }); ``` 在博客“jQuery删除table指定行”中，作者可能详细解释了这些概念，并可能提供了一些实际示例代码。通过阅读博客，你可以获得更深入的理解和实践指导。删除HTML表格中的指定行涉及到jQuery的选择器和DOM操作。掌握这些技能将有助于你更高效地管理动态网页中的表格数据。同时，要注意在实际应用中确保用户体验良好，例如提供确认提示，避免误删重要信息。

资源推荐

资源详情

资源评论

收起资源包目录

TableStudy.rar （4个子文件）

TableStudy

table1.html 2KB

jquery.js 92KB

table3.html 3KB

table2.html 3KB

<!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>

评论收藏

内容反馈