Jquery处理table中每行中某个td的click事件

最新推荐文章于 2023-01-27 19:22:56 发布

原创最新推荐文章于 2023-01-27 19:22:56 发布 · 4.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery

本文介绍如何使用jQuery为HTML表格中的每个单元格(td)添加点击事件，并通过实例代码展示了如何利用自定义属性存储数据并触发相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何响应html table中每个td的click事件呢？如果是使用Jquery的话，可以像下面这样做。

html table 截图

html table 源代码

<tbody>
	<tr>
		<td>4</td>
		<td>1111111111</td>
		<td>xqHBhlAOrgvOr</td>
		<td>jinking.xu</td>
		<td>2015-09-21 17:50:01</td>
		<td>2015-09-21 17:50:01</td>
		<td><input type="button" value="编辑" id="toEdit" name="toEdit" systemidvaule="4"></td>
	</tr>

	<tr>
		<td>3</td>
		<td>admin</td>
		<td>XsuZWohjMSIeP</td>
		<td></td>
		<td></td>
		<td>2015-09-16 15:44:37</td>
		<td><input type="button" value="编辑" id="toEdit" name="toEdit" systemidvaule="3"></td>
	</tr>

	<tr>
		<td>2</td>
		<td>goods.vip</td>
		<td>gsFpUzoJfwtNe</td>
		<td>jilin.lu</td>
		<td>2015-09-15 15:29:06</td>
		<td>2015-09-16 15:44:05</td>
		<td><input type="button" value="编辑" id="toEdit" name="toEdit" systemidvaule="2"></td>
	</tr>

	<tr>
		<td>1</td>
		<td>b2csupport_huigui</td>
		<td>LWJGxnqSyOjXd</td>
		<td></td>
		<td></td>
		<td>2015-09-16 15:44:37</td>
		<td><input type="button" value="编辑" id="toEdit" name="toEdit" systemidvaule="1"></td>
	</tr>
</tbody>

Jquery源代码

$("input[name='toEdit']").each(function(){
		var currentEle = $(this);
		currentEle.click(function(){
		  window.location.href="${basePath}v/xxx/toEdit/?systemId="+$(this).attr("systemIdVaule");
		});
});

在这里使用了一个自定义属性systemidvalue，目的是为了存储数据库主键id。当然如果你在

<input type="button" value="编辑"id="toEdit" name="toEdit"onclick=”demo('${id}')”>中加入onclick也是可以的，使用方式不同而已。