Hi,
i am dyanamically creating rows.In which I have two columns. First column contains text box while second one contains a button. On click of this button I want to delete that row.
The problem is my code I always deletes the first row.
below is the code snipet:
Please help.
i am dyanamically creating rows.In which I have two columns. First column contains text box while second one contains a button. On click of this button I want to delete that row.
The problem is my code I always deletes the first row.
below is the code snipet:
Code:
function apendValues()
{
listAttrValues=true ;
var tbl = document.getElementById('tblAttrValues');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
row.id='row'+iteration;
var val = document.getElementById('newAttrVal').value;
// left cell
var cellLeft = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.id = 'attrRow' + iteration;
el.size = 20;
el.name='attrCol';
// el.readonly ='readonly';
el.setAttribute('readonly','readonly');
el.value=val;
cellLeft.appendChild(el);
// right cell
var cellRight = row.insertCell(1);
var e2 = document.createElement('input');
e2.type = 'button';
e2.name = 'deleteRow';
e2.value = '-';
e2.onclick=deleteSelectedRow;
e2.id = 'txtRow' + iteration;
cellRight.appendChild(e2);
//Clear text box
document.getElementById("newAttrVal").value = "";
}
function deleteSelectedRow()
{
document.getElementById("tblAttrValues").deleteRow(this);
var cols=document.getElementsByName('attrCol');
for(var i = 0; i < cols.length; i++){
cols[i].id='attrRow' + i;
}
}
Comment