Question

我有一个2列的表格，我想使用jQuery将单元格转换成数组。我目前有工作，但我也希望数组也为“ 2列”，不确定这是否是正确的术语。但基本上，我希望每行的2个单元格成为数组中同一“行”的一部分。目前我有这个：

$(function() {
  var arr = [];
  $('tbody tr').each(function() {
    var $this = $(this),
        cell = $this.find('td');

      if (cell.length > 0) {
        cell.each(function() {
          arr.push($(this).text());
        });
      }
  });
  
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

如何使0成为Apples, Red，依此类推？

Answer 1

您可以这样做

$(function() {
  var arr = $('tbody tr').get()//convert jquery object to array
    .map(function(row) {
      return $(row).find('td').get()
        .map(function(cell) {
          return cell.innerHTML;
        }).join(',');
    });
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

Answer 2

好的，您也可以这样做。

$(function() {
  var arr = [];
  flag = 0;
  $('tbody tr td').each(function() {
  if(flag == 0){
  arr1 = [];
   arr1.push($(this).text());
   arr.push(arr1);
   flag = 1;
  }else{
  let arr1 = arr[arr.length-1];
  arr1.push($(this).text());
  	arr[arr.length-1] = arr1;
  	flag = 0;
  }
  });
  
  console.log(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

Answer 3

我建议：

// using Array.from() to convert the Array-like NodeList returned
// from document.querySelectorAll() into an Array, in order to use
// Array.prototype.map():
let array = Array.from(document.querySelectorAll('tbody tr')).map(

  // tr: a reference to the current array-element of the Array over
  // which we're iterating; using Arrow function syntax:
  (tr) => {

    // here we return the result of the following expression;
    // again using Array.from() to convert the NodeList of
    // the <tr> element's children into an Array, again in order
    // to utilise Array.prototype.map():
    return Array.from(tr.children).map(

      // cell is a reference to the current Node of the Array
      // of Nodes over which we're iterating; here we implicitly
      // return the textContent of each <td> ('cell') Node; after
      // using String.prototype.trim() to remove leading/trailing
      // white-space:
      (cell) => cell.textContent.trim()
    );
  });

let array = Array.from(document.querySelectorAll('tbody tr')).map(
  (tr) => {
    return Array.from(tr.children).map(
      (cell) => cell.textContent.trim()
    );
  });

console.log(array);

<table>
  <thead>
    <tr>
      <td>Table heading</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>Orange</td>
    </tr>
    <tr>
      <td>Cucumbers</td>
      <td>Green</td>
    </tr>
</table>

参考文献：

jQuery-从2列表创建数组

3 个答案: