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

╰半夏微凉° 2022-04-15 05:27 782阅读 0赞

> 一，问题

最近有一个从表格中获取动态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版本，去菜鸟教程看了之后，才现在这个方法好像在后续的
    版本删掉了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Rhb3RpYW8wMTk5_size_1_color_FFFFFF_t_70]: /images/20220415/e96c5f3587d549c1a2e7da86d93e92a6.png