javascript - 用 JQuery 迭代表

Question

我有一个动态创建的表，我需要一个按钮来从这个表中获取值列表，例如:

<table>
    <tbody>
       <tr>  <td>Jhon    </td>  <td> 32 </td>  </tr>
       <tr>  <td>William </td>  <td> 37 </td>  </tr>
    </tbody>
</table>
<button>Execute</button>

按钮需要获取一个列表，例如:

var list = {{"Jhon"},{"William"}};

我该怎么做？

编辑: 我试试这个:

var table = document.getElementById('tabelaDePontos');
var rowLength = table.rows.length;
for(var i=0; i<rowLength; i+=1){
    var row = table.rows[i];
    var cellLength = row.cells.length;
    for(var y=0; y<cellLength; y+=1){
      var cell = row.cells[y];
        console.log(cell);
     }
}

但它给了我表格中的所有 html 代码。

Answer 1

这可以使用附加到按钮的 click 事件和 map() 函数来循环遍历表格行 $('table tr ') 并返回 trim 后的第一列文本以删除多余的空格，例如:

$("td:eq(0)", this).text().trim()

示例 jQuery 片段:

$('button').on('click', function() {
  var names = $('table tr').map(function() {
    return $("td:eq(0)", this).text().trim();
  }).get();

  console.log(names);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>Jhon </td>
      <td> 32 </td>
    </tr>
    <tr>
      <td>William </td>
      <td> 37 </td>
    </tr>
  </tbody>
</table>
<button>Execute</button>

示例纯 JS 片段:

document.querySelector('button').addEventListener('click', function() {
  var names = [];

  document.querySelectorAll('table tbody tr').forEach(function(row) {
    names.push(row.cells.item(0).textContent.trim());
  });

  console.log(names);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tbody>
    <tr>
      <td>Jhon </td>
      <td> 32 </td>
    </tr>
    <tr>
      <td>William </td>
      <td> 37 </td>
    </tr>
  </tbody>
</table>
<button>Execute</button>