添加额外的HTML行：在哪里放置代码？

我有以下情况：添加额外的HTML行：在哪里放置代码？

<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数组传递值。

我想知道你会怎么做，因为我试图避免有2个地方的HTML。你会把所有的HTML在JS？或者你会把所有的HTML放在服务器（PHP）上，并用AJAX调用？或者你是否只有2个地方的HTML？（顺便说一句，我的工作该案件有5列和更多HMTL）

我使用：PHP + MYSQL + jQuery的

来源

2009-02-16 Darryl Hein

我绝对不会把HTML放在两个地方。如果可能的话，我也会避免使用JS中的HTML。事实上，我可能会让服务器写第一个表行，然后使用jquery.clone（）http://api.jquery.com/clone/在客户端根据需要多次复制该行，然后编辑任何一个属性需要改变。 – Sean 2013-02-04 17:37:54

在jQuery的教程中，您有您可以使用一个很好的例子做这个。

在活生生的实例（例如C）你有

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

为什么，而不是“<强......”你不只是增加一个新的输入行？

因为它是一个你追加的字符串，你几乎可以用javascript改变名字，所以你可以很容易地控制它。

像

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

我会做这样的说法:)

这样你就可以避免为刷新您的网页每次添加行。您也可以检测在PHP端后提交多少行有，通过解析“ROW_ID”

希望它可以帮助

编辑：回答的意见和问题

其余

我会把所有的HTML都通过append生成，它会让你的服务器负载少一点（虽然不是那么多），而且组织起来很简单。哦，你会避免刷新:)（这对于添加行）

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

来源

2009-02-16 21:50:33 fmsf

是的，我知道如何附加HTML，但我想知道你把HTML放在哪里，所以你最终不会得到重复的HTML，服务器上的一个字符串和JavaScript。 – 2009-02-16 21:55:01

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

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

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

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

来源

2009-02-16 21:57:25 jonstjohn

添加额外的HTML行：在哪里放置代码？

回答

相关问题