如何使用jQuery读取<td>标签内的<div>元素
2026-5-21
用jQuery读取表格内
元素内容的方法
嘿，我来帮你搞定这个问题！根据你给出的表格结构（id为tblRentals的租赁表格），我整理了几种实用的jQuery写法，能轻松读取标签内
的内容：1. 读取单个指定
1. 读取单个指定的内容
如果你只想获取第一个匹配的
内容（比如第一个租赁项的2. 遍历所有中的
ProductId），可以直接通过类名定位：// 获取第一个col-product-id类的div内容 const firstProductId = $("#tblRentals .col-product-id").first().text().trim(); console.log(firstProductId);
- 说明：
#tblRentals精准定位表格，.col-product-id匹配目标div；text()获取纯文本内容，若需要包含HTML标签的内容改用html()；trim()用来去除内容前后的空白字符。
2. 遍历所有中的内容
如果要批量获取每一行的对应
数据，用3. 通过
each()循环遍历表格行：// 遍历所有租赁行，收集每个行的ProductId const productIds = []; $("#tblRentals tbody tr").each(function() { // 从当前行中找到目标div并读取内容 const productId = $(this).find(".col-product-id").text().trim(); productIds.push(productId); }); console.log(productIds); // 输出所有ProductId组成的数组
- 说明：
$(this)代表当前遍历到的元素，find()在当前行内查找目标div，避免跨行匹配。
3. 通过的name属性获取内容
如果
有明确的
name属性（比如你的例子里name="ProductId"），也可以直接用属性选择器定位：// 读取所有name为ProductId的div内容 $("#tblRentals div[name='ProductId']").each(function() { console.log($(this).text().trim()); });
小提醒
哪怕
设置了
hidden属性，jQuery依然能正常读取它的内容——因为hidden只是让元素在页面上不可见，它的DOM节点和内容依然存在于页面中。内容的提问来源于stack exchange，提问作者samithagun
相关产品推荐
相关产品推荐
