jquery实现表格的多行删除

最新推荐文章于 2024-07-03 02:58:57 发布

双之城

最新推荐文章于 2024-07-03 02:58:57 发布

阅读量4.7k

点赞数 3

分类专栏： PHP 文章标签： jquery

本文链接：https://blog.csdn.net/u011026037/article/details/53229825

版权

PHP 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

初学jquery，发现自己比较脑残的一味百度，找到一些代码，就想着运行，出现问题不知道怎么解决。

下面介绍如何运用jquery实现表格的多行删除

首先如果你没有jquery类库，要先下载jquery类库，否则你的代码会运行不会出现你想要的结果。下载之后要引用。代码如下，随后还有jquery的类库压缩包，有需要的可以下载。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表格的删除</title>
<script src="jquery/jquery-1.8.3.min.js"></script> //这里引入jquery的js文件，需要下载类库，下载相应的版本就可以正常应用了。
<script type="text/javascript">

$(function(){  

    $("input[type='button']").click(function() {
    	//alert("sf");
        $("input[name='test']:checked").each(function() { // 遍历选中的checkbox
            n = $(this).parents("tr").index();  // 获取checkbox所在行的顺序
            $("table#test_table").find("tr:eq("+n+")").remove();
        });
    });
});


</script>

</head>
<body>
	<table id = "test_table" border="1px">
    	<tr><td><input type="checkbox" name="test"></td><td>1</td><td>2</td><td>3</td></tr>
    	<tr><td><input type="checkbox" name="test"></td><td>4</td><td>5</td><td>6</td></tr>
   	 	<tr><td><input type="checkbox" name="test"></td><td>7</td><td>8</td><td>9</td></tr>
    	<tr><td><input type="checkbox" name="test"></td><td>10</td><td>11</td><td>12</td></tr>
	</table>
	<input type="button" value="删除">

</body>