Question

我有以下情况：

<table><tr><td width="50">
<select name="angle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td><td>
<input type="text" name="what" value="" />
</td></tr></table>
<a href="">+ Add Row</a>

所以，计划是当用户第一次来到页面时，他们会看到1行。他们将输入数据并多次单击“添加行”以输入所有数据。以后，他们应该能够返回并编辑或删除任何行。

我的问题/问题是：在javascript中，我需要使用完整的HTML来生成每一行或执行AJAX请求以从服务器获取新行。在服务器上，我需要让HTML在用户返回编辑时生成行，或者使用json数组传递值。

我想知道你会做什么，因为我试图避免在两个地方使用HTML。你会把所有的HTML都放在JS中吗？或者你会把所有的HTML放在服务器（PHP）上并使用AJAX调用吗？或者你只是在2个地方有HTML？（顺便说一下，我工作的情况是有5列和更多的HMTL。）

我正在使用：PHP + MySQL + jQuery

Answer 1

在jquery教程中，您可以使用一个很好的示例来实现此目的。

在实例（例C）中你有

$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});

为什么不用“＆lt; strong ...”，你不只是添加一个新的输入行吗？

因为它是一个你附加的字符串，所以你可以使用javascript更改名称，这样你就可以轻松控制它。

像

.append("<input type=\"text\" name=\"row_"+id+"\">.....

我会这样做：）

这样，您每次添加行时都可以避免刷新网页。你也可以通过解析“row_id”

在提交了多少行后在php端检测到

希望有所帮助

编辑：回答评论和问题的其余部分

我会通过追加生成所有HTML，它会让你在服务器上的负载减少（尽管不是那么多）并且组织起来很简单。哦，你会避免刷新:)（这对于添加行）

对于添加了从数据库加载的行，那么它必须是服务器端。

Answer 2

正如您所描述的，有几种解决此问题的方法，每种方法都有权衡。我已经尝试了一些。我会避免在两个地方使用HTML，因为将来还需要做更多工作。

一种方法是将HTML保留在初始页面上 - 您可以在隐藏行中创建“模板”。然后，您可以使用Web语言（PHP或其他）生成已保存数据的行以及隐藏的模板行。当用户单击添加行链接/按钮时，您可以克隆此行并将其插入表的末尾或模板行的正前方。这样做的好处是用户不必等待ajax调用来加载其他行。此外，您可以轻松修改设计。潜在的下方通过隐藏行来掩盖其工作原理。

另一种方法是通过ajax完成所有加载并请求每个HTML行。在这种情况下，我建议将HTML放在可以包含在初始页面中或通过ajax调用加载的模板中。所有HTML都在一个地方。您还可以预加载额外的行，以便您没有ajax延迟。当用户单击“添加行”时，显示隐藏的预加载行并加载其他隐藏行。

最后，另一种方法是使用上面描述的模板行方法（第一个选项）并在页面加载时对JSON执行ajax请求。然后，您可以通过js和JSON数据填充必要的已保存数据行。用户必须等待数据加载，但它可以简化一些事情。

添加其他HTML行：放置代码的位置？

2 个答案: