使用 jquery 读取 HTML 表的第一列值答案

【问题标题】：Read the first column values of a HTML table with jquery使用 jquery 读取 HTML 表的第一列值
【发布时间】：2012-10-06 03:54:17
【问题描述】：

我有一张桌子：

<table id="ItemsTable" >
    <tbody>
   <tr>
     <th>
       Number
     </th>
     <th>
       Number2
     </th>
    </tr>
  <tr>
    <td>32174711</td>     <td>32174714</td>
  </tr>
  <tr>
    <td>32174712</td>     <td>32174713</td>
  </tr>
</tbody>
</table>

我需要将值 32174711 和 32174712 以及列号的所有其他值放入一个数组或列表中，我使用的是 jquery 1.8.2。

【问题讨论】：

标签： javascript jquery html asp.net-mvc-3

【解决方案1】：

var arr = [];
$("#ItemsTable tr").each(function(){
    arr.push($(this).find("td:first").text()); //put elements into array
});

查看此链接进行演示：

http://jsfiddle.net/CbCNQ/

【讨论】：

【解决方案2】：

你可以使用map方法：

var arr = $('#ItemsTable tr').find('td:first').map(function(){
     return $(this).text()
}).get()

http://jsfiddle.net/QsaU2/

来自 jQuery map() 文档：

描述：通过一个函数传递当前匹配集合中的每个元素，生成一个包含返回值的新 jQuery 对象。 . 由于返回值是一个 jQuery 包装的数组，因此 get() 返回的对象与基本数组一起使用是很常见的。

【讨论】：

@Huangism 是的，它是必需的，你的选择器只返回第一个 tr 的第一个 td。 jsfiddle.net/EB4rN
@Shmiddty 那是另一种选择，为什么你认为get 没有必要？ $.map() 和 map() 之间存在差异。 map 返回一个 jQuery 对象。
@undefined: get 或没有get，据我所知，两个小提琴在控制台中返回相同的数组（["32174711", "32174712"]）。
@FrançoisWahl 我可以看到 jQuery 对象的所有方法和属性，一个是 jQuery 对象，另一个是实际数组。
@undefined: Ahhhhhh .. 现在我明白了。抱歉没看到！非常好:) 当不使用get 时，结果仍然是一个 jQuery 对象。我可以在其上调用 jQuery 方法，例如 console.log(arr.eq(0))，但在使用 get() 时不能这样做。非常好。在这种情况下你是绝对正确的。尽管结果在控制台中看起来相同，但没有 get 它仍然是一个 jQuery 包装器。好东西。当然，如果这是用户想要的，那么我想离开 get() 是正确的，但如果你想要底层值而不是 jQuery 对象 get() 是必要的。

【解决方案3】：

// iterate over each row
$("#ItemsTable tbody tr").each(function(i) {
    // find the first td in the row
    var value = $(this).find("td:first").text();
    // display the value in console
    console.log(value);
});

http://jsfiddle.net/8aKuc/

【讨论】：

内部遍历不是很多吗？首先是.each，然后对于每一行，this 上的另一个 jQuery 包装器加上find。不确定 map 内部是如何工作的，但只使用 .find 听起来比每次在循环内使用它都“便宜”。 +1 无论如何，因为它确实为您提供了个人价值。
这个答案可能是效率最低的。只是说。
我无法谈论 map 的内部情况，但我想它会做类似的事情。

【解决方案4】：

根据你所拥有的，你可以使用 first-child

var td_content = $('#ItemsTable tr td:first-child').text()
// loop the value into an array or list

【讨论】：

【解决方案5】：

http://jsfiddle.net/Shmiddty/zAChf/

var items = $.map($("#ItemsTable td:first-child"), function(ele){
    return $(ele).text();
});

console.log(items);

【讨论】：