使用 Jquery 获取 HTML 表数据

Getting HTML table data using Jquery

本文关键字：数据 HTML 获取 Jquery 使用      更新时间：2023-09-26

我是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 对象是垃圾。不检索表数据。请帮忙。

要在jQuery中获取输入字段的值，您需要使用.val（）函数。

还要确保在 td 标签中选择输入元素

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);

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);

不要花太多时间，但我认为你需要获取 val（） 而不是 text（） 或 html（）

相关文章：