jQuery获取表格同行不同列的值

今天做练习的时候碰到一个问题，就是在一个动态生成的表格中点击a标签修改同行不同列的值，在经过网上查询和自己尝试后解决了这个问题，特此记录。

首先这是需求，点击某行的加号或者减号修改该行的入库数的数量：

新手记得引入jQuery文件：

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

加号和减号是动态生成的，这里只贴一段，图标是网上找的：

<td><a href='javascript:;' onclick='minus(this)' title='减少'>
<img src='<%=basePath %>img/minus.png' height='35' width='35f'></a></td>
<td><input type='text' name='amount' style='width:50px;' value=0 /></td>
<td><a href='javascript:;' onclick='plus(this)' title='增加'>
<img src='<%=basePath %>img/plus.png' height='35' width='35f'></a></td>

最后是js代码：

      //加号点击事件
	  function plus(thisObj){
	  	var value = $(thisObj).closest("tr").find("input[name='amount']").val();
	  	value++;
	  	$(thisObj).closest("tr").find("input[name='amount']").val(value);
	  }
	  
	  //减号点击事件
	  function minus(thisObj){
	  	var value = $(thisObj).closest("tr").find("input[name='amount']").val();
	  	if(value > 0){
		  	value--;
		  	$(thisObj).closest("tr").find("input[name='amount']").val(value);
	  	}
	  }

其中closest() 方法返回被选元素的第一个祖先元素。该方法从当前元素向上遍历，直至文档根元素的所有路径（<html>），来查找 DOM 元素的第一个祖先元素。

该方法与 parents() 类似，都是向上遍历 DOM 树，不同点是：

closest()

从当前元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的第一个单一祖先
返回包含零个或一个元素的 jQuery 对象

parents()

从父元素开始
沿 DOM 树向上遍历，并返回匹配所传递的表达式的所有祖先
返回包含零个、一个或多个元素的 jQuery 对象

jQuery获取表格同行不同列的值

猜你喜欢