Dynamically Add,Delete,Edit and Update values in Table


Dynamic Add,Delete,Edit and Update values in Table using .net HTML Page



Here i explained a simple HTML code to Dynamic Add,Delete,Edit and Update values in Table




This helpful to add the values into able dynamically
1.fun() method in java script is used to add values to able
2.delRow() method is to delete selected row from table
3.edit(item) method is used to edit values in table
and its fully based on Java script

Key Features:
1.it generate automatic unique Id for each name
2.Id will be in read only format
3.it allows to update name.
4.Edit,Delete button are dynamically create in each row of table.




//open new project in vs select new html page type the code

script language="javascript" type="text/javascript">
//code to inset new row in table
function func()
{
var tbl = document.getElementById("tblThree");
var lastRow = tblThree.rows.length;
var iteration = lastRow;
var row = tblThree.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var empId= 0;
var inc;
inc=lastRow;
var rr = document.createTextNode(inc);
cellLeft.appendChild(rr);

var cellRight = row.insertCell(1);
var empname= text2.value;
var rr = document.createTextNode(empname);
cellRight.appendChild(rr);

var cellDel = row.insertCell(2);
var delbtn= document.createElement('input');
delbtn.type='button';
delbtn.value='Delete';
cellDel.appendChild(delbtn);

delbtn.onclick=delRow;

var cellEdit = row.insertCell(3);
var editbtn= document.createElement('input');
editbtn.type='button';
editbtn.value='Edit';
cellEdit.appendChild(editbtn);
editbtn.attachEvent('onclick',edit);

text2.value="";
}

//code to delete a row
function delRow()
{
var current = window.event.srcElement;
//here we will delete the line
while ( (current = current.parentElement) && current.tagName !="TR");
current.parentElement.removeChild(current);
}
//code to edit in textbox
function edit(item)
{
var newbtn=document.getElementById("btn1");
newbtn.value="Update"; text2.value=item.srcElement.parentElement.parentElement.cells[1].innerText;

}


//Table creation begin Code







Find the complete code in attachment and try it buy saving its as HTML file


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: