我正在尝试学习 JQuery 以及 HTML。我正在尝试附加一个包含新输入数据的表。我有一个提交按钮，应该运行 JQUERY 函数来附加表。我什至在函数中放置了一个警报框，以查看它是否至少正在运行。我的函数根本不运行是否有明显的原因？
HTML
<body>
<div class="form-style-2">
<div class="form-style-2-heading">Provide your information</div>
<form name="contactPage" id="contactPage">
<label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label>
<label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label>
<label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label>
<label><span> </span><input class="addrow" type="submit" value="Submit" /></label>
</form>
<table width="80%">
<tr>
<th>First Name</th>
<th>Address</th>
<th>Email</th>
</tr>
<tr>
</tr>
</table>
<p>testtesttest</p>
</div>
JQUERY
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script>
<script>
$(document).ready(function(){
var mainElement = document.getElementById('contactPage');
$(mainElement).find('form input[type="submit"]').click(function (evt) {
evt.preventDefault();
if ($(evt.target).parents('form')[0].checkValidity()) {
alert("its working!!");
var mainElement = document.getElementById('contactPage');
var name = $("#name").val();
var email = $("email").val();
var address = $("address").val();
var html = '<tr><td>' + name + '</td>' +
'<td>' + address + '</td>' +
'<td>' + email + '</td></tr>';
$(mainElement).find('table tbody').append(html);
$(mainElement).find('form :input[name]').val('')
}
});
});
</script>
最佳答案
我想你想要这样:-
已完成更改:-
1. $(mainElement).find('input[type="submit"]').click(function (evt) {
2. $('table tbody').append(html);
$(mainElement).find('input[type="text"]').val('');
3.代替<p>testtesttest</p>添加<tbody></tbody>
工作示例:-
$(document).ready(function(){
var mainElement = document.getElementById('contactPage');
$(mainElement).find('input[type="submit"]').click(function (evt) {
evt.preventDefault();
if ($(evt.target).parents('form')[0].checkValidity()) {
var mainElement = document.getElementById('contactPage');
var name = $("#name").val();
var email = $("#email").val();
var address = $("#address").val();
var html = '<tr><td>' + name + '</td><td>' + address + '</td><td>' + email + '</td></tr>';
$('table tbody').append(html);
$(mainElement).find('input[type="text"]').val('');
}
});
});<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"> </script>
<body>
<div class="form-style-2">
<div class="form-style-2-heading">Provide your information</div>
<form name="contactPage" id="contactPage">
<label for="field1"><span>Name <span class="validated">*</span></span><input type="text" class="input-field" name="field1" id="name" value="" required /></label>
<label for="field3"><span>Address <span class="validated">*</span></span><input type="text" class="input-field" name="field3" id="address" value="" required /></label>
<label for="field2"><span>Email <span class="validated">*</span></span><input type="text" class="input-field" name="field2" id="email" value="" required /></label>
<label><span> </span><input class="addrow" type="submit" value="Submit" /></label>
</form>
<table width="100%">
<tr>
<th>First Name</th>
<th>Address</th>
<th>Email</th>
</tr>
<tr>
</tr>
</table>
<tbody>
</tbody>
</div>关于javascript - JQuery 点击功能未运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43536426/