连接 html、javascript、php 和 mysql

Question

以下是我一直在研究的一个订单表格，用于了解 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 中。

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

Answer 1

Jay，您似乎了解 PHP、MySQL 和 JavaScript 如何协同工作 - 这很好。

就个人而言，我真的很推荐使用 jQuery（JavaScript 库）。它在整个网络上被广泛使用，非常常见，功能强大且易于理解和使用。虽然有人说用一个语言的库不好，但在你了解语言之前，jQuery 帮助我更好地理解了 JavaScript，因为它易于遵循的语法。

因此，要使用 jQuery，您只需在 html 文件中添加源脚本。为什么我推荐 jQuery？它还允许您非常轻松地使用 ajax（也从数据库加载内容，无需刷新页面）。

jQuery 还允许您将点击事件与 HTML 分开。基本上，您将 id 或 class 属性分配给 HTML 元素，这是您在 js 中的引用，因此不需要 onclick=""。

至于您的 HTML：强烈建议不要使用表格布局。在 HTML5 和 CSS3 时代，表格有很好的替代品。

如果您需要更多帮助，请在评论中告诉我，我很乐意提供帮助...