添加額外的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行：在哪裏放置代碼？

回答

相關問題