Question

我几天都在努力解决这个问题。我有一个网页，上面有一个动态创建数据表（使用php和datatable）。一切都很好。现在我有2列，每行有按钮：

NAME | ADDRESS   | STAGE | ASSIGN  
John   9 Doe Way   btnS     btnA

我想要做的就是当用户点击btnS或btnA运行一个简单的更新查询并将点击的人放入舞台或为此活动指定类别时。（我可以在数据库中处理该部分）。如果我有一个超链接而不是按钮，我可以做得很好。我希望页面刷新，因为它会从我的列表中删除名称。

那么如何获取动态创建按钮行的ID？如果需要，我有一个隐藏的ID字段。

我会粘贴代码，但我不知道正确的方向。我试过jquery（函数），表单POST函数，但似乎什么都没有用？

谢谢！

Answer 1

有几种方法可以解决这个问题。在说你可以使用超链接执行此操作时，我假设您只是导航到URL。

我会给你3个选择：

选项1：

使用超链接，但使用CSS使其看起来像一个按钮。

的内容

a
{
    display:inline-block;
    padding: 2px 5px;
    background-color: #ccc;
    border: 1px solid #000;
    text-decoration:none;
}

a:active
{
    background-color:blue;
}

会让它看起来更像一个按钮。

选项2：

使用jQuery，您只需将重定向绑定到click事件：

$("a").click(function(){

    parent.location = url;

});

选项3：

使用表单，您可以使用提交按钮提交到URL。

<form action="your url here">
    <input type="submit" value="Submit"/>
</form>

任何这些选项都会产生您想要的结果。

Answer 2

您可以在按钮中插入onclick属性，如下所示：

<button onclick="location.href='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML" />Delete</button>

还有另一个解决方案：

<form action="">
  <input type="submit" name="SaveChanges" value="Delete" onclick="this.form.action='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML;" />
</form>

所以..

<table>
  <tr><th>ID</th><th>Address</th><th>Delete</th></tr>
  <tr><td id="id">1</td>
      <td>John</td>
      <td>9 Doe Way</td>
      <td><button onclick="location.href='http://www.example.com/yourscript.php?id='+ parentNode.parentNode.childNodes[0].innerHTML" />Delete</button></td></tr>
</table>

Answer 3

您可以使用AJAX请求，使用PHP代码以JSON格式提供名称和地址，以及另一个更新数据库的代码。摆脱你必须创建表的PHP代码，并通过Javascript进行。然后，您将能够动态更改表，而无需页面刷新。它将使您的网站更轻松的服务器。

编辑：你可以在你的问题下看到r3mus评论谁给你一些提示。

Answer 4

啊，看到你对动态获取行ID的看法 - 完全不同的答案。在动态输出html（通过php）输出data-rowid=$rowID到按钮元素上;使用jQuery，您可以使用按钮data事件中的$(this).data('rowid')来检索click属性。

例如，你最终会得到类似的结果，每行输出都会有data-rowid递增：

<td>myDataBaseDetails....</td><button class='buttonClass' data-rowid='15'>Click!</button>
<script>
$('.buttonClass').click(function() {
    var id = $(this).data('rowid');
    //update your database with AJAX
    $.ajax({
        url: "http://www.yoursite.com/script.php?rowid=" + id
    }).done(function() {
        location.reload();
    });
});
</script>

按钮单击更新数据库

4 个答案:

选项1：

选项2：

选项3：