i am new to javascript just started learing from net here i have a code i am trying to add details from text box but my save button is not working and the values are adding before the header can any one help me out please??

<!DOCTYPE html>
First name : <input type="text" id="new_name" value = "" > <br>
Last name  : <input type="text" id="new_lname" value = ""> <br>
Country    : <input type="text" id="new_country" value = ""> <br>
Age        : <input type="text" id="new_age" value = ""> <br> <br>
<button  onclick="add_row();" value="Add Row">Add Row</button> <br><br>
<button id='save_button' value='Save'  onclick='save_row()'> Save</button>
<table  id="data_table" border=1>
<th>First Name</th>
<th>Last Name </th>
<button id="edit_button"   value="Edit"   onclick="edit_row('1')">Edit</button>
<!--<button id="save_button"   value="Save"   onclick="save_row('1')"> Save </button>-->
function edit_row(no)
 var name=document.getElementById("name_row"+no);
 var lname=document.getElementById("lname_row"+no);
 var country=document.getElementById("country_row"+no);
 var age=document.getElementById("age_row"+no);

 var name_data=name.innerHTML;
 var lname_data=lname.innerHTML;
 var country_data=country.innerHTML;
 var age_data=age.innerHTML;

 name.innerHTML="<input type='text' id='name_text"+no+"' value='"+name_data+"'>";
 lname.innerHTML="<input type='text' id='lname_text"+no+"' value='"+lname_data+"'>";
 country.innerHTML="<input type='text' id='country_text"+no+"' value='"+country_data+"'>";
 age.innerHTML="<input type='text' id='age_text"+no+"' value='"+age_data+"'>";

function save_row(no)
 var name_val=document.getElementById("name_text"+no).value;
 var lname_val=document.getElementById("lname_text"+no).value;
 var country_val=document.getElementById("country_text"+no).value;
 var age_val=document.getElementById("age_text"+no).value;



function add_row()
 var new_name=document.getElementById("new_name").value;
 var new_lname=document.getElementById("new_lname").value;
 var new_country=document.getElementById("new_country").value;
 var new_age=document.getElementById("new_age").value;

 var table=document.getElementById("data_table");
 var table_len=(table.rows.length)-1;
 var row = table.insertRow(table_len);
  row.id =  "row"+ table_len;
  row.innerHTML= "<td id='name_row"+table_len+"'>"+new_name+"</td><td id='lname_row"+table_len+"'>"+new_lname+"</td><td id='country_row"+table_len+"'>"+new_country+"</td><td id='age_row"+table_len+"'>"+new_age+"</td><td><button id='edit_button"+table_len+"' value='Edit' onclick='edit_row("+table_len+")'>Edit</button></td>";


Recommended Answers

Have a look at the appendChild routine which should allow you to add a new row at the end of the table.

Jump to Post

All 2 Replies

Have a look at the appendChild routine which should allow you to add a new row at the end of the table.

I had a play with your code and made it work as I think you want it to by changing line 66

var table_len=(table.rows.length)-1;


var table_len=(table.rows.length);

While this works, the header row is one cell short compared to the data rows - modern browsers seem to handle this but it would be better if your table was properly constructed. I suppose the easy way is just to add an empty <th> in your original table definition.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.