1. 首頁
  2. 問答
  3. 從JavaScript用戶輸入中追加行

從JavaScript用戶輸入中追加行

2012-09-06 39 views
0

我是一個非常早期的初學者，他正嘗試在JavaScript中做一些事情。從JavaScript用戶輸入中追加行

基本上我有一個HTML表單，我收集用戶輸入。我有一個提交按鈕。在提交時，我希望來自輸入的值作爲新行附加到表中。

我花了數小時試圖找到一個方向，有人可以指出我在正確的方向嗎？

來源

2012-09-06 pinklotus

+0

您的意思是：添加到數據庫服務器端，您是否熟悉服務器端語言？或者你只是想添加一個包含用戶輸入的額外的''？ –

+0

我只是想用用戶輸入輸入。 – pinklotus

回答

4

因爲沒有人願意（或可以）提供純JS的答案，這裏是你如何可以用純JavaScript做。如果有些事情不清楚，讓我知道，我會很樂意爲您提供有用的鏈接和解釋這個代碼：

HTML：

<table id='targetTbl'> 
    <tbody> 
     <tr><th>Name</th><th>First name</th></tr> 
    </tbody> 
</table> 
<form id='inForm'> 
    <input type='text' name='name' id='name'/> 
    <input type='text' name='first' id='first'/> 
    <input type='submit' value='add row'/> 
</form>​

的JavaScript：

document.getElementById('inForm').onsubmit = function(e) 
{ 
    var newRow,i; 
    e = e || window.event; 
    if (e.preventDefault) 
    { 
     e.preventDefault(); 
     e.stopPropagation(); 
    } 
    e.returnValue = false; 
    e.cancelBubble = true; 
    newRow = '<tr>'; 
    for(i=0;i<this.elements.length;i++) 
    { 
     if (this.elements[i].tagName.toLowerCase() === 'input' && this.elements[i].type === 'text') 
     { 
      newRow += '<td>'+this.elements[i].value+'</td>'; 
     } 
    } 
    document.getElementById('targetTbl').innerHTML += newRow + '</tr>'; 
    return false; 
};

爲了達到這個目的，你需要將這些代碼包含在HTML文件的底部（不是reccomended），以確保在你嘗試改變內容之前已經加載了DOM，否則你必須把這段代碼放在裏面事件處理程序：

window.onload = function() 
{ 
    //above code goes here 
};

Here's a working fiddle

來源

2012-09-06 21:48:54

+1

+1。你慚愧我不知道如何做到這一點:) – jadkik94

+0

在失敗中表現得很親切），它表現出了性格的力量，承認了類似的東西，作爲回報，我會解開我給你的失望。但爲此，你需要先編輯它，它說。畢竟：你的回答沒有錯（技術上），你做了一個努力 –

+0

我有良好的意圖:)（不需要un-downvote：D） – jadkik94

-1

你有兩個選擇：

古典：您提交表單。服務器讀取表單，併爲添加了新行的表單的新副本生成HTML，並將其發送回瀏覽器。

Ajax：您使用AJAX在後臺提交表單，然後使用JavaScript將新行添加到HTML客戶端。

你選擇哪一個取決於你的舒適程度與後端與前端編碼。

來源

2012-09-06 20:55:59

-1

您可以使用此功能。您需要發送的參數表的ID和更改valueInputForm與您擁有的輸入值的變量

function addRow(tableID) {  

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    cell1.innerHTML = valueInputForm; 

    var cell2 = row.insertCell(1); 
    cell2.innerHTML = valueInputForm; 

    var cell3 = row.insertCell(2); 
    cell2.innerHTML = valueInputForm; 
}

來源

2012-09-06 21:03:58

+0

謝謝，更多的知識給我。 – pinklotus

0

幾點考慮：

  • 你不想你的提交按鈕才能工作。這意味着您不希望它將您帶到您在表單元素中指定的action。因此，您要麼添加一個onclick事件（<input type="submit" onclick="dosomething();return false;" />）返回false，要麼將其設置爲「button」（<input type="button" onclick="dosomething();" />）。

  • 您需要定義一個函數，當按下按鈕應該被稱爲：

例子：

function dosomething() { 
    alert("I did something"); 
    // do something useful 
}
  • 你需要創建一個<table>標籤，並添加行基於你的數據。 您可以使用jQuery，我建議您快速啓動。 JavaScript中的DOM操作是一個痛苦。 你知道嗎，忘記jQuery。檢查@Elias's answer以獲得更好，更清潔，更快速的方法。而且，它還教你更多。如果你使用圖書館，這可能是一筆寶貴的財富，如果你沒有圖書館，它肯定會是。

例（jQuery中）： 

var table = $("<table></table>"); 
for (var i=0; i<data.length; i++) { 
    var tr = $("<tr></tr>"); 
    var td = $("<td></td>"); 
    $(td).text(data[i]); 
    $(tr).append(td); 
    $(table).append(tr); 
} 
$("body").append(table);

來源

2012-09-06 21:04:46 jadkik94

+0

對不起，你顯然花了時間來體面回答，bunt不要全部瘋狂jQuery。這裏沒有jQuery標籤，OP明確表示他是JS的新手。讓他掌握基本知識，他會盡快找出要使用的庫。因此：這個答案沒有用 –

+1

@Elias我明確指出，我會發現自己比使用Javascript中的DOM操作更容易使用jQuery。如果我是初學者，我寧願不經過DOM操作。 – jadkik94

+1

和btw @EliasVanOotegem我不知道你是否仍然可以在純JS：P中做這樣的事情，因爲我真的忘了，不想記住...... – jadkik94

-2

比方說你有這個網站 HTML：

<form id="target"> 
    form-field1: <input type="text" id="form-field1" value="Hello there" /> 
    form-field2: <input type="text" id="form-field2" value="How are you" /> 
    <input type="submit" value="Go" /> 
</form> 
<div id='targettable'><table><thead></thead><tbody></tbody></table></div>

您可以使用jQuery：

$("#target :input").each(function(){ 
var input = $(this); // This is the jquery object of the input, do what you will 
    $("#targettable >tbody:last').append($(this).val()); 
})

添加jQuery腳本到你的代碼中<head>標籤

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

來源

2012-09-06 21:05:57 Vikram

+0

來吧人：**我是一個非常早期的初學者，他正嘗試在javascript中做一些事情。** + _NO jQuery Tag_！停止提供jQuery答案，這沒有幫助。讓OP在使用純粹的JS之前把它與libs混淆起來 –

+0

@EliasVanOotegem問題提出者沒有特別提到他/她不想要jQuery解決方案......也許你個人認爲jQuery很混亂。如果給出正確的信息，我相信jQuery非常直觀，不那麼麻煩。在這兩種情況下都有學習曲線：純Javascript和jQuery，爲什麼不學習更好的？由於這個原因，我將你的評論標記爲無構造的 – Vikram

+0

Flag away ...說jQuery更好的是你的觀點，而且它在IMO中是沒有根據的：就像說Zend比PHP好...我的觀點是：OP沒有使用jQuery標籤，而是用jQuery回答。創建標籤是爲了正確組織問題，而不是被忽略。而且，OP正在學習JavaScript，你所說的是：不要使用該語言，使用最常用的lib。我發現那個不好的建議，對不起 –

0

玉傢伙，閱讀更多一些，並要求朋友解釋後，我能夠用jQuery做到這一點。很抱歉，我沒有在開始時添加jQuery標籤，因爲我不知道。但是我從js的第一個練習中接觸了jQuery。所以我最終能夠掌握這一點。所以這就是我所擁有的，它對我有用。如果這是對的，可能對像我這樣的學習者有用。

我的輸入字段的ID是「名字」和「姓氏」。 getElementById（）。值獲取用戶輸入的值。

var firstname = document.getElementById("firstname").value; 
var lastname = document.getElementById("lastname").value; 
$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>");

而我通過按鈕onclick（）調用這個函數。謝謝你的支持。

來源

2012-09-07 08:17:27 pinklotus

+1

由於您使用的是jQuery，爲什麼不用'$（'＃lastname'）替換'document.getElementById（「lastname」）.value'。val（）' –

相關問題

 相關問題