如何使用表格从动态构建的表单中捕获答案

【问题标题】：How to capture from a dynamically built form with table如何使用表格从动态构建的表单中捕获
【发布时间】：2015-11-12 01:55:14
【问题描述】：

我正在为一家餐馆建立一个网站，并使用 php 和 mysql 在表单中动态构建一个表格来显示每个菜单项。每行都有一个数量输入，然后是项目和描述等，并以“添加到订单”按钮结束。我需要做的是当按下按钮时，将项目的数量和 id 发送到会话变量。我已经看到了使用数组作为输入 id 的建议，我猜不知道如何处理它们。

$d=date('N');
$sql2="CALL SP_GET_MENU_ITEM('entree', '$d');";
$result=mysql_query($sql2, $conn2);
if(!$result)
    die(mysql_error());
$count=0;

while($row=mysql_fetch_assoc($result)){
    $n=$row['itemName'];
    $de=$row['description'];
    $i=$row['ingredient'];
    $p=$row['price'];
    $dr=$row['dietRestrict'];
    $f=$row['path'];

    /*$pic="CALL SP_GET_MENU_IMAGE('$n');";
    $picTry=mysql_query($pic, $conn);
    $picResult=mysql_fetch_assoc($picTry);
    $f=$picTry['path'];*/

    print '<tr><td>
    <input type="number" min="1" name="quantity" style="width:40px;" /></td>
    <td class="itemDes">';
    print "<h2>".$n."</h2>";
    print "<img src='../admin/menu/".$f."' alt='foodPic'></td>";
    print "</td><td><p>description: ".$de."<br>ingredients: ".$i."</td><td>".$dr."</td><td>".$p."</td></p></td><td>
    <input type='button' onclick= 'doit()' value='Add to Order' class='btn'/>
}

它现在正确地填充表格，并且当任何按钮被按下时，函数 doit() [只是调用警报] 会正确调用。我在想我必须将变量传递给它，即 <onclick="doit(quantity.value))"> 那么我如何让 quantity.value 工作？？

【问题讨论】：

试试：onclick="return doit(document.getElementById("itemID").value());"
会返回该行的值吗？现在每个数量输入都将具有相同的 id，我认为这会影响它？？
试试：onclick="doit($( "input[name='quantity']" ).val())” 这应该可行。如果可行，请告诉我。
仅供参考，标准规定您永远不应在 html 中重用 id。 ID 的整个想法是成为元素的唯一标识符。如果你想为 css 重用一个 ID，你需要使用 class 属性来代替。
如果您对 html 元素稍加摆弄，我们可以帮助您更好地解决问题。

标签： javascript php jquery mysql

【解决方案1】：

您可以使用 'this' 访问当前元素，因此如果您要使用 doit(this.value)，this.value 将等于 'Add to Order'

从这里您可以使用 dom 方法在相关上下文中查找元素。很难从您的代码中分辨出来，因为我没有 HTML 的全貌，但您可以试试这个：

doit(this.parentElement.parentElement.firstElementChild.firstElementChild.value)

这会获取按钮的容器，即 td，然后获取该按钮的容器，即 tr，然后获取该按钮的第一个子元素，即该 tr 包含的第一个 td，然后输入量的第一个子项的值。（你的头晕了吗？）

【讨论】：

我跟着，但是它返回一个未定义的值。我的 doit 函数如下 function doit(number){alert('clicked ' +number)};并获得“点击未定义”作为警报
您可能需要使用不同的 parentElement 和 firstChild 组合，具体取决于您的 HTML，您可以为您的问题添加一个完整的表格吗？
好吧，我开始通过删除不必要的换行符来压缩我的代码，并且这种方法开始起作用。我想我应该更加小心我的编码风格。非常感谢
哦，那是我的错，在 HTML 中空白被认为是一个孩子。尝试改用“firstElementChild”。我将编辑我的答案以匹配。注意，firstElementChild 需要 IE9+，所以如果你需要支持 IE8，你应该使用没有空格的 firstChild。
另外，我相信 IE8 的“parentElement”存在问题，因此如果您需要支持 IE8，您需要使用“父元素”，并再次确保 html 中的标签之间的空格为零。 ..

【解决方案2】：

试试这个。由于您正在动态创建元素，因此以下表达式将在 dom 呈现后在按钮上注册一个 click 事件处理程序。这样你就不需要在 dom 中注册 click 了。

$(document).on("click","input:button",function()
{
    alert($("input:text[name=quantity]").val());
});

【讨论】：