关于标签选择器获取table中的＜td＞标签中的html值,以及＜td＞中＜input type=‘text‘＞中的value值的详解

Posted 2021-05-17 JIANGJIZE1999

关于标签选择器获取table中的＜td＞标签中的html值,以及＜td＞中＜input type=‘text‘＞中的value值的详解

目录

• 1.标签选择器获取table中的＜td＞标签中的html值
• 2.标签选择器获取table中的＜td＞中＜input type=‘text‘＞中的value值
• • 养个号太难了，┭┮﹏┭┮，13个粉丝，2000个访问量，你懂得。

1.标签选择器获取table中的＜td＞标签中的html值

这是我自己最近做的项目的一段jsp代码，

<table id="Mytable" class="table table-hover  table-bordered table-striped" style="margin-bottom: 0px;">
	  <tr>
	  	<th>序号</th>
	  	<th>设备名称</th>
	  	<th>设备编号</th>
	  	<th>设备类型编号</th>
	  	<th>设备状态</th>
	  	<th>设备是否被租用</th>
	  	<th>设备数量</th>
	  	<th>设备单价</th>
	  	<th>设备备注</th>
	  	<th>操作</th>
	  </tr>
	  <c:forEach var="equipment" items="${equipmentList }" varStatus="status" >
	  	<tr>
	  		<td>${status.index+1 }</td>
	  		<td>${equipment.name }</td>
	  		<td>${equipment.no }</td>
	  		<td>${equipment.typeId }</td>
	  		<c:if test="${equipment.state==1 }">
	  			<td>正常</td>
	  		</c:if>
	  		<c:if test="${equipment.state==2 }">
	  			<td>维修</td>
	  		</c:if>
	  		<c:if test="${equipment.state==3 }">
	  			<td>报废</td>
	  		</c:if>
	  		<c:if test="${equipment.equipmentIsBeHiredOrNot==1 }">
	  			<td>被租用了</td>
	  		</c:if>
	  		<c:if test="${equipment.equipmentIsBeHiredOrNot==0 }">
	  			<td>没有被租用</td>
	  		</c:if>
	  		<td>${equipment.number }</td>
	  		<td>${equipment.price }</td>
	  		<td>${equipment.remark }</td>
	  		<td>
	  			<!-- 获取当前的用户id -->
	  			<c:if test="${equipment.equipmentIsBeHiredOrNot==0 || equipment.number!=0 }">
	  				<input type="text" style="width: 300px"  >数量
	  			
	  			 																		
	  				<button type="button" class="btn btn-info btn-xs" onclick="javascript:send(${equipment.id },${equipment.price },1,${currentUser.id },${status.index })">租用</button>
	  			</c:if>
	  			<c:if test="${equipment.state==3 }">
	  				<button type="button" class="btn btn-info btn-xs" 
	  				onclick="javascript:sendDel(${equipment.id })">删除设备</button>
	  			</c:if>
	  			
	  		</td>
	  	</tr>
	  </c:forEach>
	</table>

这个table中有一个租借<button type="button" class="btn btn-info btn-xs" onclick="javascript:send(${equipment.id },${equipment.price },1,${currentUser.id },${status.index })">租用</button>按钮，目的是通过点击租借按钮把table中的字段的值通过ajax传入后端。但是今天遇到了一个问题，当我想在js中通过选择器获取标签里面的值的时候，就是这个标签<td>${equipment.name }</td>，我下意识地给td标签加了个id属性<td id = 'xxx' >${equipment.name }</td>，然后在js的函数中我是这样写的var equipmentName = document.getElementById('xxx').innerHTML;大家应该知道我错到哪里了，哈哈。
之后就去浏览器中测试这个按钮，然后在控制台输出字段值，console.log(equipmentBeHiredId,equipmentBeHiredCost,equipmentBeHiredState,equipmentBeHiredAdminId,status,name,inputValue);然而我发现控制台输出的永远是第一行<tr>标签录入的设备名称，所以这应该就是《td》的id属性重复导致的，很明显我们回过头去看的话，在equipmentList .length长度的循环下，每一个<td>${equipment.name }</td>都被赋予了xxx的id属性值，之后我就和室友一直在探讨如何动态更新id值在每一次 <c:forEach循环的时候，结果查csdn查其他资料都没有结果，到最后选择了标签选择器

var list = document.getElementsByTagName("tr")[status+1];
		var name = list.getElementsByTagName("td")[1].innerHTML; 

先根据定位符status获取到当前的《tr》标签，然后再在list.getElementsByTagName(“td”)数组中选择第一个标签即为<td>${equipment.name }</td>，然后点出innerHtml即可

function send(equipmentBeHiredId,equipmentBeHiredCost,equipmentBeHiredState,equipmentBeHiredAdminId,status){
		
		/* var quantity = document.getElementById("quantity"+status).value;
		var equipmentBeHiredName = document.getElementById("equipmentname"+status).innerHTML;
		*/
		
		
		var list = document.getElementsByTagName("tr")[status+1];
		var name = list.getElementsByTagName("td")[1].innerHTML; 
		
		
		// var inputValue = list.getElementsByTagName("td")[9].getElementsByTagName("input").value;
		var tb = document.getElementById("Mytable");
		var inputValue = tb.rows[status+1].cells[9].getElementsByTagName("input")[0].value;
		
		
		console.log(equipmentBeHiredId,equipmentBeHiredCost,equipmentBeHiredState,equipmentBeHiredAdminId,status,name,inputValue);
		if(confirm("确定要租用这个设备吗?")){
			$.post("${pageContext.request.contextPath}/equipment/hire.do",{equipmentBeHiredId:equipmentBeHiredId},
				function(result){
					var result=eval('('+result+')');
						if(result.errorInfo){
							alert(result.errorInfo);
						}else{
							alert("租用成功");
							window.location.href="${pageContext.request.contextPath}/equipmentBeHired/userListBeHired.do?currentUserid=${currentUser.id}";
					}
				}
			);
		}
	}

2.标签选择器获取table中的＜td＞中＜input type=‘text‘＞中的value值

然后最大的问题就是获取<td>中的input中的value值

		<c:if test="${equipment.equipmentIsBeHiredOrNot==0 || equipment.number!=0 }">
			<input type="text" style="width: 300px"  >数量
		
		 																		
			<button type="button" class="btn btn-info btn-xs" onclick="javascript:send(${equipment.id },${equipment.price },1,${currentUser.id },${status.index })">租用</button>
		</c:if>
		<c:if test="${equipment.state==3 }">
			<button type="button" class="btn btn-info btn-xs" 
			onclick="javascript:sendDel(${equipment.id })">删除设备</button>
		</c:if>
		
	</td>

通过查阅资料，我学到了cells和rows属性，，首先需要给table设置一个id值，方便我们选到他，然后

var tb = document.getElementById("Mytable");

然后tb.rows[]为这个表格下面的行数组，tb.rows[i]即为第i+1行，i从0开始。
然后tb.rows[i].cells[]为当前第i+1行这一行所包含的标签们所组成的数组。
因为我的标签在第9位所以是tb.rows[status+1].cells[9].即最终代码为

var inputValue = tb.rows[status+1].cells[9].getElementsByTagName("input")[0].value;

inputValue即为input输入框所输入的值

养个号太难了，┭┮﹏┭┮，13个粉丝，2000个访问量，你懂得。