2017-04-26 51 views
0

)目前,我有一個文本框和日期時間本地輸入,每次單擊提交按鈕時都會將某些內容存儲到數組中。然而,數組工作,但我似乎無法使用for循環將它們放入表中並顯示它們。下面是相關的JavaScript的:試圖在表格中顯示數組(

var eventName = new Array(); 
var theDate = new Array(); 
var index = 0; 
var index2 = 0; 

function submitNewEvent() { 

eventName[index] = document.getElementById("eventName").value; 
index++; 

theDate[index2] = document.getElementById("date").value; 
index2++; 



    var newTable = "<table>"; 
    for (var i=0; i < eventName.length; i++){ 
    newTable += "" + eventName[i] + "<br>" 
    } 
} 

這裏是我在嘗試在HTML顯示錶:

<script> 
     document.write ('<p>colour1: ' + newTable + '</p>'); 
    </script> 

任何幫助和建議,將不勝感激!

+2

*'java' *?請務必閱讀[this](https://en.wikipedia.org/wiki/Java_(programming_language))和[this](https://en.wikipedia.org/wiki/JavaScript)。 –

+2

我對你有一些問題,你如何以及在哪裏調用'submitNewEvent()'?你在哪裏關閉你的''? - 你的''元素在哪裏? - 您的'​​'元素在哪裏? - 你知道什麼是正確構建*表*的必要元素嗎? - 您可以在桌上使用的所有元素是什麼? –

+0

此外,'var eventName = [];'是爲了簡潔起見。 - 而不是索引變量,你可以簡單地使用Array.push(),比如'eventName.push(「blah」)''document.write'通常被稱爲JavaScript的* bad *部分(通常是很好的理由)並應該用其他方法替換。 –

回答

-1

我沒有看到你在最後關閉表格,也沒有使用<tr> and <td>。閱讀並給它一個鏡頭:HTML Tables 我想你可以嘗試這樣的事:

var newTable = "<table><tr><td>"; 
 
    for (var i=0; i < eventName.length; i++){ 
 
    newTable += "" + eventName[i] + "<br>" 
 
    } 
 
newTable += "</td></tr></table>";

這可能做的伎倆。 LMK,如果它幫助你了。

1

document.write是一個不好的做法。躲開它。

如果你想建立在香草JS一個表,你應該遵循這個模式:

(爲簡單起見,我們建立的例子只有一個列...)

var arr = ['foo', 'bar', 'baz'], 
 
    table = document.getElementsByTagName('table')[0], 
 
    tr = null, 
 
    td = null, 
 
    txt = ''; 
 

 
for (var i = 0; i < arr.length; i++) { 
 
    txt = document.createTextNode(arr[i]); 
 
    td = document.createElement('td'); 
 
    tr = document.createElement('tr'); 
 
    
 
    td.appendChild(txt); 
 
    tr.appendChild(td); 
 
    table.appendChild(tr); 
 
}
table { 
 
    border-collapse: collapse; 
 
} 
 

 
tr, th, td { 
 
    padding: 5px; 
 
    border: solid 1px black; 
 
} 
 

 

 
th { 
 
    font-weight: bold; 
 
}
<table> 
 
    <tr> 
 
    <th>Test</th> 
 
    </tr> 
 
</table>

1

你可以只使用一個陣列events = [];
數組裏面你可以追加使用.push()個對象文本,這將是這樣的:

[ 
    { 
     name : "Super event!", 
     date : "12/31/2017" 
    }, 
    { 
     name : "This is some event name", 
     date : "09/22/2017" 
    } 
] 

下面是一個例子:

// Cache your selectors 
 

 
var EL_name = document.getElementById("name"), 
 
    EL_date = document.getElementById("date"), 
 
    EL_table = document.getElementById("table"), // Our empty table in HTML 
 
    events = [];      // One simple array to store object literals 
 

 

 
function submitNewEvent() { 
 

 
    // Create an Object literal with out event dara 
 
    var eventObj = { 
 
    name : EL_name.value, 
 
    date : EL_date.value 
 
    }; 
 
    
 
    // Create Row 
 
    var row = `<tr> 
 
       <td>${eventObj.name}</td> 
 
       <td>${eventObj.date}</td> 
 
      </tr>`; 
 
    
 
    // Clear inputs 
 
    EL_name.value = EL_date.value = ""; 
 
    
 
    // Store into Array 
 
    events.push(eventObj); 
 
    
 
    // Insert row into table 
 
    EL_table.insertAdjacentHTML("beforeend", row); 
 

 
}
table {border-collapse: collapse;} 
 
th, td {border: 1px solid #aaa; padding: 4px 8px;}
Name<input type="text" id="name"> 
 
Date<input type="text" id="date"> 
 
<button onclick="submitNewEvent()">ADD EVENT</button> 
 

 
<table id="table"> 
 
    <tr> 
 
    <th>NAME</th> 
 
    <th>DATE</th> 
 
    </tr> 
 
    <!-- JS will insert here new TR --> 
 
</table>

雖然只有最後一個事件<tr> HTML被添加到<table>所有events陣列所有輸入的事件已成功保留,可以重複使用或提交給服務器數據庫!

+0

非常感謝!你能幫我把這些存儲到本地存儲,然後把它放到另一個頁面上嗎? –