Javascript動態追加到一個數組

我想創建一個帶有按鈕的文本框和div的頁面。Javascript動態追加到一個數組

每當我在文本框中插入一個值並點擊按鈕，這個值應該被插入到一個數組中，並且數組將被顯示在div中。

我嘗試下面的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title> new staff </title> 
<script type="text/javascript"> 
var data = new Array(); 

function createTable() 
{ 
    var item = document.getElementById('push').value; 
    data.push(item); 

    var theader = '<table border="1">\n'; 
    var tbody = ''; 

    for(var i=0; i<data.length; i++) 
    { 
     tbody += '<tr>'; 
     tbody += '<td>'; 
     tbody += 'Cell ' + data[i] + ',' + j; 
     tbody += '</td>' 
     tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 
</script> 
</head> 

<body> 
<form name="tablegen"> 
<label>Push: <input type="text" name="push" id="push"/></label><br /> 
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/> 
</form> 

<div id="wrapper"></div> 
</body> 
</html>

但沒有任何反應。

來源

2014-11-02 John Smith

做什麼？爲什麼你想將它存儲在數組中？ – Asik 2014-11-02 08:17:36

您是否檢查了Javascript控制檯的錯誤？如果你這樣做，你會立即發現你的錯誤，我認爲。 – Barmar 2014-11-02 08:19:24

您的代碼現在可以正常工作：http://jsfiddle.net/barmar/ubfvya5t/ – Barmar 2014-11-02 08:23:23

tbody += 'Cell ' + data[i] + ',' + j;

你在哪裏從j從哪裏？它沒有在任何地方定義。

也許你的意思是i？

刪除它，它會工作得很好。

tbody += 'Cell ' + data[i] + ',' + i;

來源

2014-11-02 08:16:56

呃哦，他把這個問題編輯出來了。 – Barmar 2014-11-02 08:20:05

對不起，我不相信這是如此簡單.....是這是答案編輯它像第一次爲了任何人都有同樣的問題 – 2014-11-02 08:25:41

我的榮幸，然後嘗試看看控制檯..它將節省您的時間.. – 2014-11-02 08:27:53

現在試試這個：替換爲「J」「我」，並增加一個div標籤ID爲「包裝」。

<!DOCTYPE html> 
<html> 
<head> 
<title> new staff </title> 
<script type="text/javascript"> 
var data = new Array(); 

function createTable() 
{ 
    var item = document.getElementById('push').value; 
    data.push(item); 

    var theader = '<table border="1">\n'; 
    var tbody = ''; 

    for(var i=0; i<data.length; i++) 
    { 
     tbody += '<tr>'; 
     tbody += '<td>'; 
     tbody += 'Cell ' + data[i] + ',' + i; 
     tbody += '</td>' 
     tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 
</script> 
</head> 

<body> 
<form name="tablegen"> 
<label>Push: <input type="text" name="push" id="push"/></label><br /> 
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/> 
</form> 

<div id="wrapper"></div> 
</body> 
</html>

來源

2014-11-02 08:20:17 gsk

他似乎已經改變了問題中的代碼，沒有更多的'j'。 – Barmar 2014-11-02 08:22:03

啊，我明白了。另外他的div標籤在身體中缺失。認爲他正在尋找什麼。 – gsk 2014-11-02 08:24:15

現在問題中也有一個div標籤:-) – gsk 2014-11-02 08:24:53

這裏是一個工作fiddle

我會建議擺脫討厭的onclick方法，不好的做法。改爲附加一個事件監聽器。

這裏是JS。

var data = new Array(); 

function createTable() 
{ 
    var item = document.getElementById('push').value; 
    data.push(item); 

    var theader = '<table border="1">\n'; 
    var tbody = ''; 

    for(var i=0; i<data.length; i++) 
    { 
     tbody += '<tr>'; 
     tbody += '<td>'; 
     tbody += data[i]; 
     tbody += '</td>' 
     tbody += '</tr>\n'; 
    } 
    var tfooter = '</table>'; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 

var button = document.querySelector('input[name="generate"]'); 

button.addEventListener('click', createTable);

和HTML要顯示在新行的表值

<form name="tablegen"> 
    <label>Push: <input type="text" name="push" id="push"/></label><br /> 
    <input name="generate" type="button" value="Create Table!"/> 
</form> 

<div id="wrapper"></div>

來源

2014-11-02 08:26:05

Javascript動態追加到一個數組

回答

相關問題