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

一、背景

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

      背景是要获取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

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".check_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <table> <thead> <tr> <th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th> <th>用户ID</th> <th>爱好</th> <th>家庭住址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check_item"></td> <td>1</td> <td>跑步</td> <td>江苏省无锡市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>2</td> <td>打球</td> <td>江苏省南京市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>3</td> <td>跳舞</td> <td>安徽省合肥市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><button class="deleteAll">批量删除</button></td>怎么可以批量删除和删除
最新发布
06-01

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铁柱同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值