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>
但没有任何反应。
tbody += 'Cell ' + data[i] + ',' + j;
你在哪里从j
从哪里?它没有在任何地方定义。
也许你的意思是i
?
删除它,它会工作得很好。
tbody += 'Cell ' + data[i] + ',' + i;
呃哦,他把这个问题编辑出来了。 – 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>
这里是一个工作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>
做什么?为什么你想将它存储在数组中? – 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