Agregue datos a la tabla usando la función onclick en JavaScript

Aquí está mi Código:

 

Add/Update Person Form



Name:

Gender: Male Female

Age:    

City:     Lahore Islamabad Karachi

   

List Of Persons

Name Gender Age City Action

Aquí está el código para 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 = document.getElementById("gender").value; var gender = document.getElementById("gender").value; var age = document.getElementById("age").value; var city = document.getElementById("city").value; rows += "" + name + "" + gender + "" + age + "" + city + ""; $(rows).appendTo("#list tbody"); } } function ResetForm(){ document.getElementById("person").reset(); }  

Ahora lo que quiero hacer es que haya tres botones en este código. Agregar, restablecer, actualizar. Estoy trabajando en Agregar ahora mismo Restablecer funciona. Escribí el código anterior para agregar datos, pero cada vez que hago clic en Agregar, los datos no se agregan al cuerpo de la tabla. Estoy usando la función onclick para agregar datos. Todo este trabajo se realiza en una sola página HTML. Creo que el problema se debe a una sola página, pero tengo que hacer esto en una página. Necesito ayuda con esto

Prueba esto:

 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 += "" + name + "" + gender + "" + age + "" + city + ""; $(rows).appendTo("#list tbody"); } } 

Lo que corregí:

  • para recuperar un valor necesitas el .value de .value o el .val() de jQuery .val()
  • en tu función estabas buscando var gender = document.getElementById("gender").innerHTML; , pero no hay entrada con esa ID, debes usar el name
  • Tenga en cuenta que debe tener ID únicos, por lo que en mi violín corregí sus botones para class="button" lugar.

Violín

Solución con javascript simple:

 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 += "" + name + "" + gender + "" + age + "" + city + ""; var tbody = document.querySelector("#list tbody"); var tr = document.createElement("tr"); tr.innerHTML = rows; tbody.appendChild(tr) // } } function ResetForm() { document.getElementById("person").reset(); } 

Violín

Prueba esto

HTML

  

Add/Update Person Form



Name:

Gender: Male Female

Age: &nbsp&nbsp&nbsp

City: &nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp

List Of Persons

Name Gender Age City Action

Guión

 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("name").value; var gender =document.querySelector('.gender:checked').value; var age = document.getElementById("age").value; var city = document.getElementById("city").value; rows += "" + name + "" + gender + "" + age + "" + city + ""; $(rows).appendTo("#list tbody"); } } function ResetForm(){ document.getElementById("person").reset(); } 

MANIFESTACIÓN