时间戳

首页 > 解决方案 > 如何使用 Jquery 获取 td 值并存储在数组中？

jquery - 如何使用 Jquery 获取 td 值并存储在数组中？

问题描述

我正在寻找一种方法来获取（第一，第二，第三等等）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>

标签： jqueryarraysloopshtml-table

解决方案

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>

推荐阅读