使用JQ获取表格中的动态id数据

一，问题

最近有一个从表格中获取动态id的一个需求，虽然以前做过，但是因为之前也没有怎么记录下来，所以忘记了。查了一些资源，现在知道怎么实现了。然后记录下来，下次再用到了，就可以回来查了。

二，解决方案

2.1 测试源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态获取id</title>
		<script src="js/jquery-1.11.0.min.js"></script>
		<style>
			table > tr,td{
				border:1px solid #01AAED;
				width: 100px;
			}
			table{
				width: 300px;
			}
			.contentiv{
				position: fixed;
				left: 35%;
				top: 35%;
			}
		</style>
	</head>
	<body>
		<div class="contentiv">
			<table>
				<tr>
					<td>1</td>
					<td>KOLO</td>
					<td><button class="getId">获取id</button></td>
				</tr>
				<tr>
					<td>3</td>
					<td>JACK</td>
					<td><button class="getId">获取id</button></td>
				</tr>
				<tr>
					<td>5</td>
					<td>WOWO</td>
					<td><button class="getId">获取id</button></td>
				</tr>
			</table>
		</div>
		 
	</body>
	<script>
		$(function(){
			$("table").on("click","tr",function(){
				var _this = $(this).children();
				console.log(_this.html())
			})
			
		})
	</script>
	
</html>

2.2 使用$(“选择器”).on(“触发事件”，“某个元素”，function(){})

2.3 查询获取父节点和子节点的方法

可以考虑去菜鸟教程之类的网站查看。我电脑上有一个1.4版本的JQ中文文档，然后用了里面的方法，
结果提示方法没有定义。我是用JQ的1.11版本，去菜鸟教程看了之后，才现在这个方法好像在后续的
版本删掉了。

使用JQ获取表格中的动态id数据

2.4 解释能获取动态ID的JQ代码

	$(function(){
		$("table").on("click","tr",function(){
			var _this = $(this).children();	
			console.log(_this.html())
		})
		
	})

$(this)   ====>				<td>1</td>
					<td>KOLO</td>
					<td><button class="getId">获取id</button></td>

$(this).children()     ====>		<td>1</td>

$(this).children().html()     ====>		1

使用JQ获取表格中的动态id数据

相关推荐