从数据库中获取值到动态添加的行

时间:2014-04-22 05:32:58

标签: php jquery ajax

我是PHP编程的新手, 现在我正在为计费系统创建程序。 我创建了一个表并动态地将行添加到表中,这很好。 现在我想将数据库中的值添加到动态添加的行中,请告诉我如何添加值。 这是我的表格代码

      <form style="margin-left: 200px; padding: 10px; background: yellow;     width:         500px;" action="bill.php" method="post" name="transaction" id="transaction">
        <span style="color: black">Receipt      No:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="rcptNo" id="rcptNo" /></br></br>

        <label for="student name"><span style="color: black">Customer Name:</span></label>
        <select name="st_name" id="st_name">
            <option value="">Select..</option>  
        </select></br></br>
        <label for="academic year"><span style="color: black">Academic Year:</span>&nbsp;&nbsp;</label>
        <select name="acad_year" id="acad_year">
            <option value="">Select..</option> 
        </select></br></br>
        <label for="item name"><span style="color: black">Item Name:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp</label>
        <select name="item_name" id="item_name">
            <option value="">Select..</option>    
        </select>

        <input type="button" name="addItem" id="addItem" value="ADD ITEM"  /></br></br>
        <!--<div id="items1"><b></b></div>-->

        <table id="items" border="2" width="400px" cellpadding="4" cellspacing="1">

            <tr>
                <!--<th>Sr.No</th>-->
                <th>Item Name</th>
                <th>Unit Cost</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>

            <tbody>

            </tbody>
        </table>
    </form>

这是JQUERY代码

var cnt = 2;
$("#addItem").click(function() {       
        $('#items tr').last().after('<tr><td>' + cnt + '</td><td>' + cnt + '</td><td><input type="text" name="txtbx' + cnt + '" value="' + cnt + '"></td></tr>');
        cnt++;
});

请告诉我,如何将数据库中的项目名称和单价添加到动态添加的行中?

提前致谢。

2 个答案:

答案 0 :(得分:0)

我假设你有一个SQL数据库。这是什么样的SQL?

您可以使用Ajax调用来获取数据库信息,然后在动态创建的表中使用它。

你的ajax看起来像是:

$.ajax({
  url: "http://locationofyourdbhook",
})
  .done(function( data ) {
    if ( console && console.log ) {
      $('#items tr').last().after('<tr><td>' + data.cnt + '</td><td>' + data.cnt +        '</td><td><input type="text" name="txtbx' + data.cnt + '" value="' + data.cnt + '"></td>  </tr>');
    cnt++;
    }
  });

答案 1 :(得分:0)

您应该创建一个PHP页面来检索数据库数据。例如database.php。 然后向该页面发送ajax请求,如下所示。 从ajax响应中,您可以向行添加详细信息。

var cnt = 2;
$("#addItem").click(function() {
    $.ajax({
        url: "database.php",
    }).done(function(data){
        if (data) {
            $('#items tr').last().after('<tr><td>' + data.cnt + '</td><td>' + data.cnt + '</td><td><input type="text" name="txtbx' + data.cnt + '" value="' + data.cnt + '"></td>  </tr>');
            cnt++;
        }
    });
});

注意:对于ajax参考:

https://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/ajax_ajax.asp