var login = document.getElementById('loginIdVal');
var password = document.getElementById('loginIdVal');
function add() {
var list = [];
if (login.value && password.value != '') {
list.push(login.value);
alert(push[0]);
}
}
<!DOCTYPE html>
<html>
<body>
<form methode="post">
<table style="width:60%;margin-left:20%; margin-top:50px">
<tr height="25">
<td width="150" align="right">Login ID</td>
<td><input type="text" style="width:100%;" id="loginIdVal" /></td>
</tr>
<tr height="25">
<td align="right">Password</td>
<td><input type="password" style="width:100%;" id="passwordIdVal" /></td>
</tr>
<tr height="25">
<td align="right"></td>
<td><button onclick="add()">Add</button></td>
</tr>
</table>
<table border="1" style="width:60%;margin-left:20%; margin-top:200;">
<tr height="25">
<th width="150">Login ID</td>
<th>Password</th>
</tr>
<tr height="25">
<td align="right"></td>
<td></td>
</tr>
</table>
</script>
</form>
</body>
</html>
我的要求是一旦用户直接在表单中输入任何凭据,其推送列表,登录ID和密码分开并添加到带有登录ID和密码的作者表中,如果没有用户那么,我需要显示空表其他明智的行长度等于用户的长度,并且一个用户只能有一条记录。
更正这些错误:
var login = document.getElementById('loginIdVal');
var password = document.getElementById('passwordIdVal'); // not 'loginIdVal'
function add(){
var list = [];
if(login.value && password.value !='s') {
list.push(login.value);
alert(push[0]); // WHAT IS PUSH ??? is it list method ??? seriously RTFM
}
}
还有这些:
function add() {
var login, password;
login = document.getElementById('loginIdVal');
password = document.getElementById('passwordIdVal');
addLine(login.value, password.value);
login.value = '';
password.value = '';
}
function addLine(login, password) {
var $table;
$table = document.getElementById('submited-table');
if( login && password != 's' ) {
var $line = document.createElement('tr'),
$cellLogin = document.createElement('td'),
$cellPassword = document.createElement('td');
$cellLogin.textContent = login;
$cellPassword.textContent = password;
$line.appendChild( $cellLogin );
$line.appendChild( $cellPassword );
$table.appendChild( $line );
}
}
function print() {
document.getElementById('result').textContent = JSON.stringify( getList() );
}
function getList(){
var list = [];
document.querySelectorAll('#submited-table tr:not(:first-child)').forEach(function($line){
list.push( {
'login':$line.firstChild.textContent,
'password':$line.lastChild.textContent
});
});
return list;
}
<!DOCTYPE html>
<html>
<body>
<form method="post" action="javascript:void(0)">
<table style="width:60%;margin-left:20%; margin-top:50px">
<tr height="25">
<td width="150" align="right">Login ID</td>
<td>
<input type="text" style="width:100%;" id="loginIdVal"/>
</td>
</tr>
<tr height="25">
<td align="right">Password</td>
<td>
<input type="password" style="width:100%;" id="passwordIdVal"/>
</td>
</tr>
<tr height="25">
<td align="right"></td>
<td><button onclick="add()">Add</button></td>
</tr>
</table>
</form>
<table id="submited-table" border="1" style="width:60%;margin-left:20%; margin-top:200;" >
<tr height="25">
<th width="150">Login ID</td>
<th>Password</th>
</tr>
</table>
<pre id="result"></pre>
<button onclick='print()'>Print Data</button>
</body>
</html>