PHP和Javascript：表格内的多个按钮答案

【问题标题】：PHP and Javascript : Multiple Buttons inside a tablePHP和Javascript：表格内的多个按钮
【发布时间】：2014-12-14 17:23:49
【问题描述】：

我正在使用 PHP、Javascript 和 MySQL。我的目标是在每一行都有一个按钮。该按钮应调用 onclick 功能和 href 到另一个页面。

我的代码有问题 --> 只有第一行的按钮是可点击的...

我假设每个按钮的按钮 ID 必须是唯一的。我有哪些选项可以使所有按钮都可点击？

// printing table rows
while($row = mysqli_fetch_row($result))
{
    echo "<tr>";
    echo "<td><button id='greenbutton' class='small pill green'>$row[0]</button></td>"; 
    echo "<td><img src='/iframe/$row[7]'>&nbsp$row[5]</td>";
    echo "<td>$row[4]&nbspmin(s)</td>";     
    echo "<td><img src='/iframe/$row[6]'>&nbsp$row[2]</td>";
    if ($row[3] == 0) {
        echo "<td>Unknown</td>";
        }
    else {echo "<td>$row[3]</td>";}
    echo "</tr>\n";

    // FOR ONCLICK
    echo "<script type='text/javascript'>";
    echo "document.getElementById('greenbutton').onclick = function () {";
    echo "location.href = '/user';";
    echo "};";
    echo "</script>";   


}
echo "</table></center>";

【问题讨论】：

委托监听table的事件，检查处理函数中的e.target，如果是按钮，做点什么。

标签： javascript php forms button onclick

【解决方案1】：

您的 dom 元素的 id 应该始终是唯一的。为此，您可以在 while 中添加一个计数器，以便您的所有按钮都有一个 id，如“greenbutton1”、“greenbutton2”、“greenbutton3”等。

$cnt = 1;
// printing table rows
while($row = mysqli_fetch_row($result))
{
    echo "<tr>";
    echo "<td><button id='greenbutton$cnt' class='small pill green'>$row[0]</button></td>"; 
    echo "<td><img src='/iframe/$row[7]'>&nbsp$row[5]</td>";
    echo "<td>$row[4]&nbspmin(s)</td>";     
    echo "<td><img src='/iframe/$row[6]'>&nbsp$row[2]</td>";
    if ($row[3] == 0) {
        echo "<td>Unknown</td>";
    }
    else {echo "<td>$row[3]</td>";}
    echo "</tr>\n";
    $cnt++;
}
echo "</table></center>";

在那个例子中，我没有将你的 javascript 函数添加到你的 while 循环中，因为它看起来对你的所有按钮来说都是相同的函数。我建议你只添加一次函数，但使用类选择器而不是像这样的 id 选择器绑定它。

// FOR ONCLICK
echo "<script type='text/javascript'>";
echo "document.getElementsByClassName('myGreenButtons').onclick = function () {";
echo "location.href = '/user';";
echo "};";
echo "</script>";

然后在 while 循环中将 myGreenButtons 类添加到您的按钮中。您还可以使用属性或类型选择器以更灵活的方式收集您的 dom 元素。查看这些链接以获取更多信息： http://www.w3schools.com/cssref/css_selectors.asp http://www.htmlgoodies.com/beyond/javascript/using-javascripts-css3-selectors.html#fbid=FhIuAA6GqpH

希望这会有所帮助！

【讨论】：

非常感谢这项工作！但是现在我需要这个 javascript 在点击时更新 PHP $_SESSION 中的值。如何以简单的方式做到这一点？
那么 javascript 和 PHP 是两个不同的实体。（客户端和服务器端）您不能通过 javascript 更新 $_SESSION。你将不得不通过 PHP 来做到这一点。因此，我建议您将表格放入指向一些 PHP 代码的 html 表单中，这些代码将处理重定向而不是“location.href”。在表单中放置一个没有价值的隐藏输入。然后调整你的javacript，这样当你的一个按钮被点击时，你想要更新的值就会放在那个输入中，然后你通过javascript提交表单。 PHP 将能够通过 $_POST 和 $_GET 获取您的值。

【解决方案2】：

echo "<td><a href='/user'><button class='small pill green'>$row[0]</button></a></td>";

...会成功的。

【讨论】：