Question

我想制作一个包含所有数字的数组。这是我的代码：

＆＃13;

$(function(){ // dom ready
    $('tr').each(function() {
      var nums = $(this).map(function() {
          return (this).find('td:nth-child(3)').text()
      }).get();
      console.log(nums);
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
        <td>760</td>
        <td>John</td>
        </tr>
        <tr>
        <td>532</td>
        <td>Peter</td>
        </tr>
        <tr>
        <td>201</td>
        <td>Martin</td>
        </tr>
        <tr>
        <td>12</td>
        <td>Barman</td>
        </tr>
    </tbody>
</table>

＆＃13;

它有什么问题，我该如何解决？

Answer 1

首先，您在$处理程序的(this)上缺少map()前缀。然后，要使用:nth-child(1)而不是:nth-child(3)来获取数字。您也可以直接使用map()，无需each()。最后，假设您希望值实际上是数字而不是字符串，请对它们使用parseInt()，如下所示：

＆＃13;

$(function() { // dom ready
  var nums = $('tr').map(function() {
    return parseInt($(this).find('td:nth-child(1)').text(), 10)
  }).get();
  console.log(nums);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>760</td>
      <td>John</td>
    </tr>
    <tr>
      <td>532</td>
      <td>Peter</td>
    </tr>
    <tr>
      <td>201</td>
      <td>Martin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Barman</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

像这样更改parseInt($(this).find('td:nth-child(1)').text())。parseInt()用于将字符串更改为数字

有什么不对？


在回复语句中遗漏$

numbers列是第一个单元格find('td:nth-child(1)')

但您正在尝试使用3rd单元创建一个数组。但是不存在。只有两列可用

＆＃13;

$(function(){ // dom ready
    $('tr').each(function() {
      var nums = $(this).map(function() {
          return parseInt($(this).find('td:nth-child(1)').text())
      }).get();
      console.log(nums);
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
        <td>760</td>
        <td>John</td>
        </tr>
        <tr>
        <td>532</td>
        <td>Peter</td>
        </tr>
        <tr>
        <td>201</td>
        <td>Martin</td>
        </tr>
        <tr>
        <td>12</td>
        <td>Barman</td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 3

小错误，

将return (this).find('td:nth-child(3)')更改为return $(this).find('td:nth-child(1)')

＆＃13;

$(function(){ // dom ready
    $('tr').each(function() {
      var nums = $(this).map(function() {
          return $(this).find('td:nth-child(1)').text()
      }).get();
      console.log(nums);
    })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
        <td>760</td>
        <td>John</td>
        </tr>
        <tr>
        <td>532</td>
        <td>Peter</td>
        </tr>
        <tr>
        <td>201</td>
        <td>Martin</td>
        </tr>
        <tr>
        <td>12</td>
        <td>Barman</td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 4

我认为这是一个更轻的＆＃39;版本：

var nums=[];
$('td:nth-child(1)').each(function(){
    nums.push(parseInt(this.innerHTML));
});
console.log(nums);
//[760, 532, 201, 12]

如何制作一个表格列的数组？

4 个答案: