Получить все строки из динамической таблицы jQuery

Question

Я пытаюсь прочитать все строки из динамической таблицы. Основная идея - прочитать все строки и сохранить их в массиве для дальнейшей обработки. Но до сих пор мне не удалось получить данные о строках. Приведенный ниже код возвращает только заголовки таблиц.

Вот код:

var data = []; 

var i = 0; 

$('#tempTable td').each(function (index, tr) { 
    var tds = $(tr).find('td'); 

    if (tds.length > 1) { 
     data[i++] = { 
      action: tds[0].textContent, 
      spec: tds[1].textContent, 
      data: tds[2].textContent, 
      unit: tds[3].textContent, 
      upper_tol: tds[4].textContent, 
      lower_tol: tds[5].textContent, 
      tol_unit: tds[6].textContent, 
      def: tds[7].textContent 
     } 
    } 
}); 

И HTML разметка выглядит следующим образом:

<table id='tempTable'> 
    <thead> 
     <tr> 
      <td class='table_head' width='80px'>Header1</td> 
      <td class='table_head' width='435px'>Header2</td> 
      <td class='table_head' width='100px'>Header3</td> 
      <td class='table_head' width='100px'>Header4</td> 
      <td class='table_head' width='100px'>Header5</td> 
      <td class='table_head' width='100px'>Header6</td> 
      <td class='table_head' width='100px'>Header7</td> 
      <td class='table_head' width='80px'>Header8</td> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- Rows inserted dynamically here using jQuery --> 
    </tbody> 
</table> 

Answer 1

Вы настроите свои заголовки таблицы, как «тд» вместо того, чтобы вы должны инициализировать их в «й ', как указано ниже.

<table id='tempTable'> 
    <thead> 
     <tr> 
      <th class='table_head' width='80px'>Header1</th> 
      <th class='table_head' width='435px'>Header2</th> 
      <th class='table_head' width='100px'>Header3</th> 
      <th class='table_head' width='100px'>Header4</th> 
      <th class='table_head' width='100px'>Header5</th> 
      <th class='table_head' width='100px'>Header6</th> 
      <th class='table_head' width='100px'>Header7</th> 
      <th class='table_head' width='80px'>Header8</th> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- Rows inserted dynamically here using jQuery --> 
    </tbody> 
</table> 

Также см., на каком событии вы выбираете данные таблицы (Перед тем, как таблица выбора sho uld заполняются данными).

Для выбора данных из таблицы:

//traverse each row 
$('#tempTable tr').each(function (index, tr) { 
    var cols = []; 

    //get td of each row and insert it into cols array 
    $(this).find('td').each(function (colIndex, c) { 
     cols.push(c.textContent); 
    }); 

    //insert this cols(full rows data) array into tableData array 
    tableData.push(cols); 
    }); 

    console.log("tableData: ", tableData); 

Пожалуйста найти скрипку https://jsfiddle.net/Prakash_Thete/frm2ebug/1/ для того же ..