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动态追加到一个数组

回答

相关问题