Javascript 使用Jquery获取HTML表数据

我是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>

     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标记中的输入元素

因此，您的代码应该如下所示：

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

---

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

还要确保您选择了td标记中的输入元素

因此，您的代码应该如下所示：

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

---

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

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

表格单元格如何具有值@epascarello：它是表格单元格内的一个输入字段，输入字段可以有值。表格单元格如何有值@epascarello：它是表格单元格中的一个输入字段，输入字段可以有值。Price是一个span标记，因此您可以使用。text here和not。valPrice是一个span标记，因此您可以使用。text here和not。val@AkhilKPAULOSE你想告诉我什么？别难过。OP和accepted Response都为同一家公司工作。谷歌并不总是你的朋友+1:）@TrueBlueAussie没什么好难过的：-）@AkhilKPAULOSE你想告诉我什么？别难过。OP和accepted Response都为同一家公司工作。谷歌并不总是你的朋友+1:）@TrueBlueAussie没什么可难过的：-）。