Question

<html>
<head>
<title>Student form</title>
</head>
<body>
<div id="data">

表单：有4个字段和1个按钮，用于向表中添加数据。

<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData()">Add</button>
</form>
</div>

<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>

脚本：AddData（）函数将表单中的数据提交给表，并在单击按钮时调用。

<script>
function AddData()
{
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td>
<td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>

</body>
</html>

Answer 1

试试这个。

将查询库链接appentTo()添加为jquery Object
使用submit
您需要返回onsubmit以防止页面刷新，否则每次提交都会重新加载页面

function AddData() {
  var rows = "";
  var name = document.getElementById("Name").value;
  var branch = document.getElementById("branch").value;
  var address = document.getElementById("address").value;
  var contact = document.getElementById("contact").value;
  rows += "<tr><td>" + name + "</td><td>" + branch + "</td><td>" + address + "</td><td> " + contact + "</td></tr> ";
  $(rows).appendTo("#list tbody");
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">


  <form align="center" onsubmit="return AddData()">
    <h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br>
    <button type="submit">Add</button>
  </form>
</div>

<div id="tab">
  <table id="list" cellspacing="3" cellpadding="3" border="1">
    <thead>
      <tr>
        <td>Name</td>
        <td>Branch</td>
        <td>Address</td>
        <td>Contact</td>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Answer 2

您可以将事件传递给AddDate(e)并使用e.preventDefault()。

<html>
<head>
<title>Student form</title>
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="data">


<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData(event)">Add</button>
</form>
</div>

<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>



<script>
function AddData(e)
{
e.preventDefault();
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td><td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>

</body>
</html>

我想使用Javascript中的onclick按钮从表单提交数据

2 个答案: