<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="mycss.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4>REGISTER FORM</h4>
<p><small>Please, fill in all the fields.</small></p>
<form id="register-form">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter user name" required>
</div>
<div class="form-group">
<label for="dof">Date of Birth</label>
<input type="date" class="form-control" id="dof" placeholder="mm/dd/yyyy" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="tel">Phone number</label>
<input type="tel" class="form-control" id="tel" placeholder="Enter Phone number">
</div>
<button id="save-button" class="btn btn-primary pull-right" onclick="save();">Save</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Email</th>
<th>Phone number</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script>
$( function() {
$( "#dof" ).datepicker();
} );
</script>
<script type="text/javascript">
function save() {
var tbody = document.getElementsByTagName('tbody')[0];
var name = document.getElementById('name').value;
var dof = document.getElementById('dof').value;
var email = document.getElementById('email').value;
var tel = document.getElementById('tel').value;
var tr = document.createElement('tr');
var columns = [name, dof, email, tel]
for (var i = 0; i < columns.length; i++) {
var td = document.createElement("td");
var text = document.createTextNode(columns[i]);
td.appendChild(text);
tr.appendChild(td);
}
tbody.appendChild(tr);
};
</script>
</body>
</html>
我的 save() 函数不起作用。
附注伙计们:)不要读它..这是为了支持服务;)这很烦人..我的意思是弹出窗口说它看起来主要是代码...bla bla
最佳答案
您的问题是表单提交，从而重新加载页面并重置所有内容。
您可以通过在事件对象上调用 preventDefault() 来解决此问题。为此，您必须对 save 函数更改两件事:
添加一个函数参数来捕获事件对象，我们称之为e:
function save(e) {在函数中的某个位置调用
preventDefault，但通常将其放在接近末尾的位置:e.preventDefault(); }
这还不是全部。现在您必须确保事件对象传递给您的函数。至少有两种方法:
如果您坚持使用
onclick属性，请将其更改为包含特殊的event对象:<button ... onclick="save(event);">许多人认为根本不使用
onclick属性是更好的做法。在这种情况下，删除该属性，并通过 JavaScript 附加事件处理程序:$('#save-button').click(save);在这种情况下，事件对象会自动传递。
进一步说明
既然您正在使用 jQuery，为什么不一致地使用它呢？您的代码中有许多 native DOM 调用，例如 document.getElementsByTagName，jQuery 有更好的等效项。
将所有这些放在一起，您的代码可能如下所示:
$('#save-button').click(function (e) {
var columns = [
$('#name').val(),
$('#dof').val(),
$('#email').val(),
$('#tel').val()
];
var $tr = $('<tr>');
for (var i = 0; i < columns.length; i++) {
$("<td>").text(columns[i]).appendTo($tr);
}
$('tbody:first').append($tr);
e.preventDefault();
});
关于javascript - JS-动态创建表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38996453/