jQuery $(tr) 的选取

最新推荐文章于 2022-05-13 20:53:55 发布

xueshandugu

最新推荐文章于 2022-05-13 20:53:55 发布

阅读量1.5k

点赞数

分类专栏： web 前端用例 Jquery 实用小功能

web 前端用例同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Jquery 实用小功能

7 篇文章 0 订阅

订阅专栏

效果：

	1
	2
	3

效果描述：点击某一行，仅仅前面的复选框被选中；点击删除按钮，不让复选框选中。

代码实现：

<span style="font-size:18px;">最简单的就是在删除按钮click事件最后写return false取消冒泡 ，如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.backcolor {
background-color:#00CCCC;
}
.hover {
background-color:#FF6600;
}
</style>
<script src="js/jquery-1.4.4.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		$("#tableID tr").click(function(){
		$(":first-child input",this).attr("checked",(!$(":first-child input",this).attr("checked")));
		});
		
		$("tr input:button").click(function(){
			alert($(this).parent().html());
			return false;
		});
	});

</script>
<body>
<table id="tableID" width="200" border="1" cellpadding="1">
  <tr>
    <td><input type="checkbox" value="1" /></td>
    <td>1</td>
    <td><input type="button" value="delete" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" value="2" /></td>
    <td>2</td>
    <td><input type="button" value="delete" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" value="3" /></td>
    <td>3</td>
    <td><input type="button" value="delete" /></td>
  </tr>  
</table>
</body>
</html></span>