Member Avatar for poornima_1

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>
<html>
<body>
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>
<tr>
<th>First Name</th>
<th>Last Name </th>
<th>Country</th>
<th>Age</th>
</tr>
<button id="edit_button"   value="Edit"   onclick="edit_row('1')">Edit</button>
<!--<button id="save_button"   value="Save"   onclick="save_row('1')"> Save </button>-->
</tr>
</table>
<script>
function edit_row(no)
{
 document.getElementById("edit_button"+no);
 document.getElementById("save_button"+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;

 document.getElementById("name_row"+no).innerHTML=name_val;
 document.getElementById("lname_row"+no).innerHTML=lname_val;
 document.getElementById("country_row"+no).innerHTML=country_val;
 document.getElementById("age_row"+no).innerHTML=age_val;

 document.getElementById("edit_button"+no);
 document.getElementById("save_button"+no);
}

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>";

 document.getElementById("new_name").value="";
 document.getElementById("new_lname").value="";
 document.getElementById("new_country").value="";
 document.getElementById("new_age").value="";
}
</script>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 225 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kgweb
Member Avatar for kgweb

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

Member Avatar for kgweb

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;

to

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.