javascript - 如何从数据库生成的项目中创建（功能）onclick 按钮？

问题描述

@olafmoriarty，再次感谢您解决这个问题。你对它很满意。我在玩过它之后发现的一件事是，您的解决方案将它链接到 Todo ID。但我需要解决方案以待办事项的状态为条件。IE：

如果 Status_ID = 3(Finished) --> 那么它应该删除 Todo Item + 属性。如果不是 -> 显示“未完成”的警报弹出窗口
除了第一部分，我希望它能够在单击“已完成任务”按钮时 --> 将该项目也放置在显示的项目列表的底部。
最后添加 （不需要在这里回答，但只是为了让你知道我的意图） --> 我将尝试找出一种方法来保存 CSS 效果（删除线并将其移至底部），因此当您离开页面并返回时它仍然存在。但这是我在考虑帮助之前首先需要考虑的事情。

您可以在以下链接中找到 index.php（包括之前的代码和我为您提供的解决方案的编辑版本，希望它能够满足我的需求）： https ://codesandbox.io/s/agitated-matsumoto -bsxuk?file=/index.php

如果对于这些（前 2 点）您还需要其他任何东西，请告诉我。但我认为这就是你所需要的。

<<------------------------->> 下面这部分的答案是：

我正在尝试创建一个按钮功能，当单击它时会删除“待办事项”。现在我遇到的问题是，无论我在哪里搜索，都没有任何解决方案提到对数据库生成的项目执行此操作（我可能搜索错误）。

到目前为止，我有下面的工作，它给了我一个按钮（如图所示），它还没有后面的功能。任何人都可以向我发送正确的方向吗？第一次用它背后的数据库制作这样的按钮。

待办事项示例

标签： javascriptphphtml

在您的代码示例中，您有一个按钮，单击该按钮会触发 function finishedTask()。如果您的数据库表只有一行，那就足够了 - 但由于它可能没有，告诉 javascript“任务已完成”是不够的。您还必须告诉它完成了哪个任务，以便您的函数知道要删除哪一行。

解决这个问题的最简单方法可能是将唯一标识符作为参数传递给您的函数，然后将相同的标识符添加到 div 以便函数将其识别为要删除的元素。

这可以通过将您的printf语句替换为以下内容来实现：

printf('<div id="%s">Todo %s: %s<br /> Colour: %s<br /> Status %s:  %s<br /> Priority %s: %s<br /><button onclick="finishedTask(%s)">Finished Task</button></div>', $row['id'], $row['id'], $row['task'], $row['colour'], $row['status_id'], $row['status'], $row['priority_id'], $row['priority'], $row['id']);

（我在这里唯一更改的是向id您添加一个属性div并更改finishedTask()为finishedTask(%s)，并填写额外的 printf 参数。）

然后你的 javascript 可能看起来像这样：

function finishedTask(id) {
   document.getElementById(id).classList.add("finished");
}

（这个函数实际上并没有删除文本，它只是将一个 CSS 类添加到 div 中，您可以根据自己的喜好设置样式。）

正如您已经被告知的那样，代码是否来自数据库对于 javascript 无关紧要。只需使用一个独特的元素将按钮连接到您希望按钮更改的任何内容。

javascript - 如何从数据库生成的项目中创建（功能）onclick 按钮？

问题描述

解决方案

推荐阅读