通过jquery获取td下的input标签的值，并且改变onclick的参数值

最新推荐文章于 2024-07-28 02:34:20 发布

原创最新推荐文章于 2024-07-28 02:34:20 发布 · 5.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #onclick

JS 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在大量重复的table结构中，精确获取特定td下的input对象，并修改其onclick方法的参数值。通过jQuery的选择器和属性修改方法，实现对动态生成页面元素的高效操作。

一、背景

这几篇博客貌似我都是记在笔记本上超过一个月了，手动捂脸！我自己看着都有点陌生，行吧，就当重温一下当时碰到的问题了。

背景是要获取table标签里面的td下的input的对象，并修改它的onclick方法的传参。这个问题难点就在于table表格很大，往下一层层寻找挺麻烦的，每个td都是循环生成的，属性基本都相同。而且修改onclick方法的传参我也是第一次碰到，记录一下。

二、问题还原

1、原始的html标签

<table width='100%' class="sortable scrolltabledata table table-bordered  table-hover table-condensed" id="table_content_data">
<tbody>
<tr id='1'  class='turquoise'>
	<td  id='0_0'   >1</td>
	<td  id='0_1'   >
		<img src='/css/images/manage.png' class='menu_icon ' />
	</td>
	<td  id='0_2'   >manage</td>
	<td  id='0_3'   >Manage</td>
	<td  id='0_4'   >-</td>
	<td  id='0_5'   >All Project</td>
	<td  id='0_6'   >
		<img src='css/images/enabled.png' alt='Enabled' title='Enabled' width='40px' />
	</td>
	<td  id='0_7'    class='showAction'>
		<input type='button' class='btn btn-info' 'showEdit(1);' value='Edit' />
	</td>
</tr>
</tbody>
</table>

这部分是我手动打的标签，实际的table就和它差不多，不过量级比这个大多了。

<td  id='0_7'    class='showAction'>
		<input type='button' class='btn btn-info' 'showEdit(1);' value='Edit' />
	</td>

我们的目标就是获取上面这个td标签下的input值，并且修改onclick方法

2、获取td下的input标签的对象

$("table.sortable tbody tr").eq(i).children("td:eq(7)").find("input").val()；

（1）这部分当时试了很多次，就是通过选择器先精准到tr
（2）这里的eq(i)中的i是循环的次数，我们通过eq(i)精准到每个tr
（3）通过children找到td，然后通过eq(7)找到我们要找的那个td
（4）通过find查询到td下的input，就是我们要的那个input

3、更改onclick的参数值

 $("table.sortable tbody tr").eq(i).children("td:eq(7)").find("input").attr('onclick',"showEdit("+这里是你要传的变量值+");");

能找到那个input对象，剩下的就简单了，通过attr更改属性的方法，直接更改input中的showEdit方法，参数传入咱们要传的变量值。（亲测可用）

参考：https://zhidao.baidu.com/question/1499647000471357259.html

end