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')并返回修剪后要删除的第一列文本来完成此操作像这样的多余空格：

$("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>

Answer 2

您不需要jQuery。只需使用本机DOM API。

const $table = document.querySelector('table')

function execute () {
  const result = Array.prototype.map.call($table.rows, row => {
    return row.cells.item(0).textContent
  })
  console.log(result)
}

<table>
    <tbody>
       <tr>  <td>Jhon    </td>  <td> 32 </td>  </tr>
       <tr>  <td>William </td>  <td> 37 </td>  </tr>
    </tbody>
</table>
<button onclick="execute()">Execute</button>

用JQuery迭代表

2 个答案: