填充动态表以进行编辑

Question

I am building a small invoice application. Right now I can create an invoice with a form taking care of the header information, stored in my invoice table, and on the same page below that a dynamic table created with Javascript to store my invoice line item information in my invoicelineitem table.

Now I need to open the invoice and edit some information, the header part is no problem, but how do I fill my dynamic table with the invoice detail information (lineitems) stored in the database? This also needs to be in a dynamic table because not only might I make changes to an individual line, but I might delete and/or add new lines?

This is what I am using to create my dynamic table for my new line items, it is part of my html file. If there is a "better" way of doing it you recommend I am open to suggestions. I would be fine not using JavaScript at all if it is possible.

<script language="javascript">

 function addRow(tableID) { 

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name="chkbox[]";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    cell2.innerHTML = "<input type='text' name='itemdesc[]' >";

    var cell3 = row.insertCell(2);
    cell3.innerHTML = "<input type='number'  name='unitprice[]' >";

    var cell4 = row.insertCell(3);
    cell4.innerHTML =  "<input type='number'  name='quantity[]' >";

    var cell4 = row.insertCell(4);
    cell4.innerHTML =  "<input type='number'  name='linetotal[]' >";
    }

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
    }catch(e) {
        alert(e);
    }
}

</script>

<INPUT type="button" value="Add Row" onClick="addRow('dataTable')" />

<INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" />

<form action="" method="post" name="f">  

<TABLE width="425" border="1">
<thead>
<tr>
<th width="98"></th>
<th width="94">Desc</th>
<th width="121">Price</th>
<th width="84">Qty</th>
<th width="84">Tot</th>

</tr>
</thead>
<tbody id="dataTable">

</tbody>
</TABLE>

Here is my php code I use to process the dynamic table from my index.php file.

/* Save the new invoice lines to the database */

/* Prepare the sql statement outside the for loop so that it only has to be
    * done once instead of every time through the loop */

$sql = 'INSERT INTO invoicelineitem SET
    invoiceid = :invoiceid,
    itemdesc = :itemdesc,
    unitprice = :unitprice,
    quantity = :quantity,
    linetotal = :linetotal';
$s = $pdo->prepare($sql);

for($i=0; $i < count($_POST['itemdesc']); $i++)
{
    try
    {
        /* Handle the values from the dynamic table as we loop, the sql
            * statment has already been prepare */
        $s->bindValue(':invoiceid', $last_id);
        $s->bindValue(':quantity', $_POST['quantity'][$i]);
        $s->bindValue(':unitprice', $_POST['unitprice'][$i]);
        $s->bindValue(':itemdesc', $_POST['itemdesc'][$i]);
        $s->bindValue(':linetotal', $_POST['linetotal'][$i]);
        $s->execute();
    }        

Again, I'm completely stumped as to pull the line items out of the database and put them in a dynamic table for editing.