如何使用 Jquery 获取 td 值并存储在数组中？ [复制]

Question

我正在寻找一种方法来获取（第一个、第二个、第三个等）td 值，并将它们存储在数组中。

使用each 迭代一个td：

$("table tbody tr td").each(function(i,e){
        console.log($(this).html());
      });

使用此代码，我需要获取所有列值，例如：

George
Princeton
Alabama
Pizza

如何使用各自的键将这些值存储在数组中：Name, College, State, Food。我在想：

 var array = [];
$("table tbody tr td").each(function(i,e){
        array['Name'] = $(this) ??  //I dont know how get the first td. 
      });

我不知道这是否是迭代表的最佳方式，但我认为我在如何获取第一个、第二个、第三个 td 值方面遗漏了一些东西。

表格：（这只是一个例子，值是动态创建的）

<table >
    <tbody>
        <tr>
            <td> George </td>
            <td> Princeton </td>
            <td> Alabama </td>
            <td> Pizza </td>
        </tr>
        <tr>
            <td> Charli</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Milk Shake </td>
        </tr>
        <tr>
            <td> Max</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Rice </td>
        </tr>
        <tr>
            <td> Peter</td>
                <td> Princeton </td>
            <td> Alabama </td>
            <td> Fast Food </td>
        </tr>
    </tbody>
</table>

Answer 1

const arrayFromJQuery = $("table tbody tr").map(function(i, row) {
  const data = $('td', row);
  return {
    Name: data.eq(0).text().trim(),
    College: data.eq(1).text().trim(),
    State: data.eq(2).text().trim(),
    Food: data.eq(3).text().trim()
  }
}).get();

console.log(arrayFromJQuery);

// or without jquery, just modern JS

const array = [...document.querySelectorAll("table tbody tr")].map((row) => {
  const [Name, College, State, Food] = [...row.querySelectorAll('td')].map(td => td.textContent.trim());
  return {
    Name,
    College,
    State,
    Food
  }
})
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

Answer 2

试试这个：

$(function() {
  var keys = [];
  var myData = {};
  $("table thead th").each(function() {
    var k = $(this).text().trim().toLowerCase();
    keys.push(k);
    myData[k] = [];
  });
  $("table tbody tr").each(function(i, el) {
    $.each(keys, function(k, v) {
      myData[v].push($("td:eq(" + k + ")", el).text().trim());
    });
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>State</th>
      <th>Food</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

结果：

{
  "name": [
    "George",
    "Charli",
    "Max",
    "Peter"
  ],
  "college": [
    "Princeton",
    "Princeton",
    "Princeton",
    "Princeton"
  ],
  "state": [
    "Alabama",
    "Alabama",
    "Alabama",
    "Alabama"
  ],
  "food": [
    "Pizza",
    "Milk Shake",
    "Rice",
    "Fast Food"
  ]
}

如果你需要一个对象数组，你可以这样做：

$(function() {
  var keys = [];
  var myData = [];
  $("table thead th").each(function() {
    var k = $(this).text().trim().toLowerCase();
    keys.push(k);
  });
  $("table tbody tr").each(function(i, el) {
    var row = {}
    $.each(keys, function(k, v) {
      row[v] = $("td:eq(" + k + ")", el).text().trim();
    });
    myData.push(row);
  });
  console.log(myData);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>College</th>
      <th>State</th>
      <th>Food</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> George </td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Pizza </td>
    </tr>
    <tr>
      <td> Charli</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Milk Shake </td>
    </tr>
    <tr>
      <td> Max</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Rice </td>
    </tr>
    <tr>
      <td> Peter</td>
      <td> Princeton </td>
      <td> Alabama </td>
      <td> Fast Food </td>
    </tr>
  </tbody>
</table>

结果：

[
  {
    "name": "George",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Pizza"
  },
  {
    "name": "Charli",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Milk Shake"
  },
  {
    "name": "Max",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Rice"
  },
  {
    "name": "Peter",
    "college": "Princeton",
    "state": "Alabama",
    "food": "Fast Food"
  }
]

希望对您有所帮助。

Answer 3

阅读this 我必须找到解决方案。

 $("#test").click(function(){

          var thvalues = $('table thead th').map(function(){
            return $(this).text();
          });

          var rows = $('table tbody tr').map(function(){
            var result = {};
            var values = $(this).find('td').map(function(){
              return $(this).text();
            });

          for(var i=0;i<thvalues.length;i++){
            result[thvalues[i]] = values[i];
          }

          return result
          }).toArray();

          console.log(thvalues);
          console.log(rows );

       }); // endAdd

结果

(2) [{…}, {…}]
0:
Name: " George "
State: " Alabama "
College: " Princeton "
Food: " Pizza "
__proto__: Object
1:
Name: " Peter "
State: " Alabama "
College: " Princeton "
Food: " Fast Food "
__proto__: Object
length: 2
__proto__: Array(0)