Получение данных таблицы HTML с помощью JQuery

Question

Я новичок в JQuery. Прежде всего, я хотел бы сказать, что я исследовал почти день относительно этого запроса. Пробовали несколько методов, но никто не работает. Я пытаюсь закодировать модуль биллинга с помощью HTML, PHP и JQuery. До сих пор я успешно создал таблицы HTML. Я хотел бы, чтобы данные из этих таблиц были извлечены на страницу PHP, поэтому я могу напечатать их с правильным форматированием.

Таблица HTML выглядит следующим образом.

<table id="items"> 
    <tbody> 

     <tr> 
      <th>SlNo</th> 
      <th>Item</th> 
      <th>Unit Cost</th> 
      <th>Quantity</th> 
      <th>Price</th> 
     </tr> 

<tr class="item-row"> 
     <td class="item-name"> 
      <div class="delete-wpr"> 
      <input type="text" class="slno"/> 
      <a class="delete" href="javascript:;" title="Remove row">X</a> 
      </div> 
     </td> 

      <td><input type="text" class="slno"/></td>   

      <td><input type="text" class="cost"/></td> 
      <td><input type="text" class="qty"/></td> 
      <td><span class="price"></span></td> 
     </tr> 



    <input type="button" value="submit" onClick="storeAndShowTableValues()"/> 


    <tbody> 

Теперь JQuery выглядит следующим образом.

 var TableData = new Array(); 
    $('#items tr').each(function(row, tr){ 

    TableData[row]={ 
     "ItemNum" : $(tr).find('td:eq(0)').text(), 
     "Itemname" :$(tr).find('td:eq(1)').text(), 
     "unitprice" : $(tr).find('td:eq(2)').text(), 
     "Qty" : $(tr).find('td:eq(3)').text(), 
     "price" : $(tr).find('td:eq(4)').text() 
    } 
} 
); 
TableData.shift(); // first row is the table header - so remove 

var TableData = JSON.stringify(TableData); 

Но объект JSON, который я получаю, является мусором. Данные таблицы не извлекаются. Пожалуйста помоги.

Answer 1

Не принимать много ваше время, но я думаю, вам нужно будет получить val() вместо text() или html()

Answer 2

Чтобы получить значение поля ввода в jQuery, вам необходимо использовать функцию .val().

Также убедитесь, что вы выбрали входной элемент в пределах вашего тд тега

http://api.jquery.com/val/

Так что ваш код должен выглядеть следующим образом:

var TableData = new Array(); 

    $('#items tr').each(function(row, tr){ 

    TableData[row]={ 
     "ItemNum" : $(tr).find('td:eq(0) input').val(), 
     "Itemname" :$(tr).find('td:eq(1) input').val(), 
     "unitprice" : $(tr).find('td:eq(2) input').val(), 
     "Qty" : $(tr).find('td:eq(3) input').val(), 
     "price" : $(tr).find('td:eq(4)').text() 
    } 
} 
); 
TableData.shift(); // first row is the table header - so remove 

TableData = JSON.stringify(TableData); 

Answer 3

var TableData = new Array(); 

$('#items tr').each(function(row){ 

TableData[row]={ 
    "ItemNum" : $(this).find('td:eq(0) input').val(), 
    "Itemname" :$(this).find('td:eq(1) input').val(), 
    "unitprice" : $(this).find('td:eq(2) input').val(), 
    "Qty" : $(this).find('td:eq(3) input').val(), 
    "price" : $(this).find('td:eq(4) input').val(), 
    } 
    } 
); 
TableData.shift(); // first row is the table header - so remove 

    var TableData = JSON.stringify(TableData);