使用JavaScript中的onclick函数将数据添加到表格 [英] Add data to table using onclick function in JavaScript
本文介绍了使用JavaScript中的onclick函数将数据添加到表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的代码：
< body>
< h2>添加/更新个人表单< / h2>
< div id =data>
< form id =person>
< br>< br>
名称：< input id =namename =nametype =text>
< br>< br>
性别：< input name =gendertype =radiovalue =Male>男性
<输入名称=性别type =radiovalue =女性>女
< br>< br>
年龄：& nbsp;& nbsp;& nbsp; < input id =agename =agetype =text>
< br>< br>
城市：& nbsp;& nbsp;& nbsp;< select id =cityname =city>
< option> Lahore< / option>
< option>伊斯兰堡< / option>
< option>卡拉奇< / option>
< / select>
< br>< br>
< input id =buttontype =buttonvalue =Resetonclick =ResetForm（）>& nbsp;& nbsp;& nbsp;
< input id =buttontype =buttonvalue =Addonclick =AddData（）>
< input id =buttontype =buttonvalue =Update>
< / form>
< / div>
< h3>人员名单< / h3>
< div id =tab>
< table id =listcellspacing =0pxcellpadding =20pxtext-align =center>
< thead>
< tr>
< td>名称< / td>
< td>性别< / td>
< td>年龄< / td>
< td>城市< / td>
< td>动作< / td>
< / tr>
< / thead>
< tbody>
< / tbody>
< / table>
< / div>
以下是JAVASCRIPT的代码：
<脚本>
函数AddData（）{
var x = document.getElementById（age）.value;
var y = document.getElementById（name）.value;
var letters ='/ ^ [a-zA-Z] + $ /'; （（parseInt（x）！=（x））&&（y == parseInt（y）））{
alert（Worong Value Entered）;
}
else {
var rows =;
var name = document.getElementById（gender）。value;
var gender = document.getElementById（gender）。value;
var age = document.getElementById（age）.value;
var city = document.getElementById（city）。value;
rows + =< tr>< td> + name +< / td>< td> + gender +< / td>< td> +年龄+< / td>< td> + city +< / td>< / tr>;
$（rows）.appendTo（＃list tbody）;
函数ResetForm（）{
document.getElementById（person）。reset（）;
}
< / script>
现在我想要做的是在此代码中有三个按钮。添加，重置，更新。
我正在处理添加立即重置作品。我已经写了上面的代码来添加数据，但是当我点击添加时，数据并没有添加到表格主体中。我正在使用onclick函数来添加数据。所有这些工作都是在一个HTML页面上完成的。我认为问题是因为单页，但我必须在一页上完成。需要帮助。
解决方案
试试这个：
function AddData（）{
var x = document.getElementById（age）.value;
var y = document.getElementById（name）.value;
var letters ='/ ^ [a-zA-Z] + $ /'; （（parseInt（x）！=（x））&&（y == parseInt（y）））{
alert（Worong Value Entered）;
} else {
var rows =;
var name =sadcsad;
var gender = $（'input [name =gender]：checked'）。val（）;
var age = document.getElementById（age）.value;
var city = document.getElementById（city）。value;
rows + =< tr>< td> + name +< / td>< td> + gender +< / td>< td> +年龄+< / td>< td> + city +< / td>< / tr>;
$（rows）.appendTo（＃list tbody）;
我改正了：
- 检索
< input>值，您需要javascript的.value或jQuery的.val（） - 在您寻找的函数中
var gender = document.getElementById（gender）。innerHTML;，但没有该ID的输入，应该使用name - 请注意，您必须拥有唯一的ID，因此在我的小提琴中，我已将您的按钮改正为
class =button。
小提琴
使用纯javascript的解决方案：
函数AddData（）{
var x = document 。.getElementById（ 年龄）值;
var y = document.getElementById（name）.value;
var letters ='/ ^ [a-zA-Z] + $ /'; （（parseInt（x）！=（x））&&（y == parseInt（y）））{
alert（Worong Value Entered）;
} else {
var rows =;
var name =sadcsad;
var gender = document.querySelector（'input [name =gender]：checked'）;
性别=性别？ gender.value：'';
var age = document.getElementById（age）.value;
var city = document.getElementById（city）。value;
rows + =< td> + name +< / td>< td> + gender +< / td>< td> +年龄+< / td>< td> +城市+< / td>;
var tbody = document.querySelector（＃list tbody）;
var tr = document.createElement（tr）;
tr.innerHTML =行;
tbody.appendChild（tr）
$ b //
}
}
函数ResetForm（）{
document.getElementById （ 人）复位（）;
}
小提琴
Here is my Code:
<body>
<h2>Add/Update Person Form</h2>
<div id = "data">
<form id = "person">
<br><br>
Name: <input id = "name" name = "name" type = "text">
<br><br>
Gender: <input name = "gender" type = "radio" value = "Male"> Male
<input name = "gender" type = "radio" value = "Female"> Female
<br><br>
Age: <input id = "age" name = "age" type = "text">
<br><br>
City: <select id = "city" name = "city">
<option>Lahore</option>
<option>Islamabad</option>
<option>Karachi</option>
</select>
<br><br>
<input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
<input id = "button" type = "button" value = " Add " onclick = "AddData()">
<input id = "button" type = "button" value = " Update ">
</form>
</div>
<h3>List Of Persons</h3>
<div id = "tab">
<table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
<thead>
<tr>
<td>Name</td>
<td>Gender</td>
<td>Age</td>
<td>City</td>
<td>Action</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Here is the code for JAVASCRIPT:
<script>
function AddData(){
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if((parseInt(x)!=(x))&&(y==parseInt(y))){
alert("Wrong Value Entered");
}
else{
var rows = "";
var name = document.getElementById("gender").value;
var gender = document.getElementById("gender").value;
var age = document.getElementById("age").value;
var city = document.getElementById("city").value;
rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
$(rows).appendTo("#list tbody");
}
}
function ResetForm(){
document.getElementById("person").reset();
}
</script>
Now what I want to do is that there are three buttons in this code. Add, reset, update. Im working on Add right now Reset works. I've written the above code to add data but when ever I click Add the data is not added to the table body. I am using onclick function to add data. All this work is done on a single HTML page. I think the problem is because of single page but I have to do this on one page. Need help with this.
解决方案
Try this:
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = "sadcsad";
var gender = $('input[name="gender"]:checked').val();
var age = document.getElementById("age").value;
var city = document.getElementById("city").value;
rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
$(rows).appendTo("#list tbody");
}
}
What I corrected:
- to retrieve a
<input>value you need javascript's.valueor jQuery's.val() - in your function you were looking for
var gender = document.getElementById("gender").innerHTML;, but there is no input with that ID, you should usename - Note that you must have unique ID's, so in my fiddle I corrected your buttons to
class="button"instead.
Fiddle
Solution with plain javascript:
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = "sadcsad";
var gender = document.querySelector('input[name="gender"]:checked');
gender = gender ? gender.value : '';
var age = document.getElementById("age").value;
var city = document.getElementById("city").value;
rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
//
}
}
function ResetForm() {
document.getElementById("person").reset();
}
Fiddle
这篇关于使用JavaScript中的onclick函数将数据添加到表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
