Question

我创建了一个简单的库存表格。填写表格后，表格由（产品编号，产品名称，价格，数量，总计）组成，然后单击添加按钮，所有记录将成功添加表格。当我发送数据到add.php时。 json在顶部传递两个null数据，我不解释为什么会这样。我在下面附加了错误，看到前两行不显示任何数据，仅显示我添加的数据。请任何人帮助我解决问题。

0
:
{barcode: "", pname: "", pro_price: "", qty: "", total_cost: ""}
1
:
{barcode: "↵                    ↵                ", pname: "↵                    ↵                    ↵                ", pro_price: "↵                    ↵                ", qty: "↵                    ↵                ", total_cost: "↵                    ↵                "}
2
:
{barcode: "111", pname: "bun", pro_price: "20", qty: "2", total_cost: "40"}
3
:
{barcode: "111", pname: "jam", pro_price: "30", qty: "1", total_cost: "30"}

表

 <table class="table table-bordered">
                        <caption> Add Products  </caption>
                        <tr>
                            <th>Product Code</th>
                            <th>Product Name</th>
                            <th>Price</th>
                            <th>Qty</th>
                            <th>Amount</th>
                            <th>Option</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode"  required>
                            </td>
                            <td>
                                <label id="pro_name" name="pname" id="pname"></label>
                                <input  type="text" class="form-control" placeholder="barcode" id="pname" name="pname" disabled >
                            </td>
                            <td>
                                <input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
                                       placeholder="price" >
                            </td>
                            <td>
                                <input type="number" class="form-control pro_price" id="qty" name="qty"
                                       placeholder="qty" min="1" value="1"  required>
                            </td>
                            <td>
                                <input type="text" class="form-control" placeholder="total_cost" id="total_cost" name="total_cost">
                            </td>
                            <td>
                                <button class="btn btn-success" type="button" onclick="addproduct()">Add
                                </button>
                            </td>
                        </tr>
                    </table>
                    <table class="table table-bordered" id="product_list">
                        <caption> Products</caption>
                        <thead>
                        <tr>
                            <th style="width: 40px">Remove</th>
                            <th>Product Code</th>
                            <th>Product Name</th>
                            <th>Unit price</th>
                            <th>Qty</th>
                            <th>Amount</th>
                        </tr>
                        </thead>

                        <tbody></tbody>
                    </table>

jquery

 function  addproduct()
    {
        var barcode = $("#barcode").val();
        var pname = $("#pname").val();
        var pro_price = $("#pro_price").val();
        var qty = $("#qty").val();
        var total_cost = $("#total_cost").val();
        var markup = "<tr>  <td>" + barcode + "</td><td>" + pname + "</td>  <td>" + pro_price + "</td> <td>" + qty + "</td>        <td>" + total_cost + "</td>       </tr>";
        $("#product_list tbody").append(markup);
    }



      function save() {
            var table_data = [];

            $('table tbody tr').each(function(row,tr)
            {
                var sub = {
                    'barcode' : $(tr).find('td:eq(0)').text(),
                    'pname' : $(tr).find('td:eq(1)').text(),
                    'pro_price' : $(tr).find('td:eq(2)').text(),
                    'qty' : $(tr).find('td:eq(3)').text(),
                    'total_cost' : $(tr).find('td:eq(4)').text(),

                };
                table_data.push(sub);
            });
            console.log(table_data);

    }

Answer 1

function  addproduct()
{
    var barcode = $("#barcode").val();
    var pname = $("#pname").val();
    var pro_price = $("#pro_price").val();
    var qty = $("#qty").val();
    var total_cost = $("#total_cost").val();
    var markup = "<tr>  <td>" + barcode + "</td><td>" + pname + "</td>  <td>" + pro_price + "</td> <td>" + qty + "</td>        <td>" + total_cost + "</td>       </tr>";
    $("#product_list tbody").append(markup);
}



  function save() {
        var table_data = [];

        $('#product_list tbody tr').each(function(row,tr)
        {            
        	var sub = {
                'barcode' : $(tr).find('td:eq(0)').text(),
                'pname' : $(tr).find('td:eq(1)').text(),
                'pro_price' : $(tr).find('td:eq(2)').text(),
                'qty' : $(tr).find('td:eq(3)').text(),
                'total_cost' : $(tr).find('td:eq(4)').text(),

            };
            table_data.push(sub);
        });
        console.log(table_data);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered">
                        <caption> Add Products  </caption>
                        <tr>
                            <th>Product Code</th>
                            <th>Product Name</th>
                            <th>Price</th>
                            <th>Qty</th>
                            <th>Amount</th>
                            <th>Option</th>
                        </tr>
                        <tr>
                            <td>
                                <input type="text" class="form-control" placeholder="barcode" id="barcode" name="barcode"  required>
                            </td>
                            <td>
                                <label id="pro_name" name="pname" id="pname"></label>
                                <input  type="text" class="form-control" placeholder="barcode" id="pname" name="pname" disabled >
                            </td>
                            <td>
                                <input type="text" class="form-control pro_price" id="pro_price" name="pro_price"
                                       placeholder="price" >
                            </td>
                            <td>
                                <input type="number" class="form-control pro_price" id="qty" name="qty"
                                       placeholder="qty" min="1" value="1"  required>
                            </td>
                            <td>
                                <input type="text" class="form-control" placeholder="total_cost" id="total_cost" name="total_cost">
                            </td>
                            <td>
                                <button class="btn btn-success" type="button" onclick="addproduct()">Add
                                </button>
                            </td>
                        </tr>
                    </table>
                    <table class="table table-bordered" id="product_list">
                        <caption> Products</caption>
                        <thead>
                        <tr>
                            <th style="width: 40px">Remove</th>
                            <th>Product Code</th>
                            <th>Product Name</th>
                            <th>Unit price</th>
                            <th>Qty</th>
                            <th>Amount</th>
                        </tr>
                        </thead>

                        <tbody></tbody>
                    </table>
                      <button class="btn btn-success" type="button" onclick="save()">Save</button>

将您的jQuery dom选择代码从$('table tbody tr').each(function(row,tr)更改为$('#product_list tbody tr').each(function(row,tr)即可。因为在您的html中存在两个表dom元素。

正在检查。

Answer 2

将您的jQuery dom选择代码从$('table tbody tr').each(function(row,tr)更改为$('#product_list tbody tr').each(function(row,tr)即可。因为在您的html中存在两个表dom元素。

添加记录json传递两个null数据

2 个答案: