Question

我想创建一个带有按钮文本框和div的页面。

每当我在文本框中插入一个值并单击按钮时，该值应插入数组中，数组将显示在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>

但没有任何反应。

Answer 1

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

你从哪里拿走j？它没有在任何地方定义。

也许你的意思是i？

删除它，它会正常工作。

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

Answer 2

立即尝试：替换＆＃34; j＆＃34;与＆＃34;我＆＃34;并添加了一个id为＆＃34; divper＆＃34;。

的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] + ',' + 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>

Answer 3

这是一个有效的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>

Javascript动态附加到数组

3 个答案: