Interfacing html, javascript, php and mysql

下面是我一直在研究html，javascript，php和mysql如何相互作用的订单。

https://www.dropbox.com/s/7zpok07w1bygu60/Screen%20Shot%202012-08-12%20at%2010.28.41%20AM.png

此表的目标是让用户在数量字段中输入一个数字，并且在更改时，javascript 将自动更新该特定产品的总成本。 问题是我希望从 mysql 数据库表填充列表。

这是我正在使用的html，javascript和php代码。

.HTML

<table>
<tr>
    <td>
        Product
    </td>
    <td>
        Description
    </td>
    <td>
        Quantity
    </td>
    <td>
        Price
    </td>
    <td>
        Total Cost
    </td>
</tr>
<?php include("pop_prodlist.php"); ?>
<tr>
    <td>Totals</td>
    <td></td>
    <td>TotalQuantity</td>
    <td></td>
    <td>TotalCost</td>
</tr>
</table>

.PHP

    while($row = mysql_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['P_Name'] . "</td>";
    echo "<td>" . $row['P_Description'] . "</td>";
    echo "<td>
    <input type='text' size='3' name='" . $row['P_Name'] . "_Quantity'
      onChange='calcCost()'/>
    </td>";
    echo "<td>" . $row['P_Cost'] . "</td>";
    echo "<td id='" . $row['P_Name'] . "_Cost'>0.00</td>";
    echo "</tr>";
}

Javascript calcCost（） 函数

    function calcCost()
    {
      var theForm = document.forms['productform'];
    /*
    COMMENTED OUT FOR TIME BEING
    var pquan = theForm.elements[productname + '_Quantity'].value;
    var costperquan = '15.99';
    var ptotalcost = costperquan * pquan;
    */
     var divobj = document.getElementById('Basketball_Cost');
     divobj.innerHTML = "helloworld";
    }

目前遇到的问题是，我无法弄清楚如何根据从 mysql 查询确定的产品名称，从 php 脚本回显中将唯一参数放入 javascript 函数 calcCost 中。

此外，为了教育自己，我很好奇更好的解决方案是什么/看起来是什么样子。 我怀疑这是解决问题的最优雅的解决方案，我希望看到一些更好的解决方案。