У меня есть таблица, созданная динамически, и мне нужна кнопка, чтобы получить список значений из этой таблицы, например:

<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-код из таблицы.

1
Lucas Prestes 21 Сен 2018 в 19:50

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>
1
Lazar Ljubenović 21 Сен 2018 в 17:05

Это можно сделать с помощью события 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>
3
Zakaria Acharki 21 Сен 2018 в 17:33