Итерация таблицы с помощью JQuery - PullRequest
Новая
       5

Итерация таблицы с помощью JQuery

0 голосов
/ 21 сентября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Вам не нужен 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>
0 голосов
/ 21 сентября 2018

Это можно сделать с помощью события 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>
...