Thank you to all who may look this over.
I have a table with several rows, each row with a delete button for that row. However I can also add more rows or delete the pre-existing rows. Unfortunately, I cannot delete dynamically created rows. Here is the delete script:
function removeRowFromTable(delbutton)
{
var tbl = document.getElementById('phonelist');
var lastRow = tbl.rows.length;
var evalStringA = '';
var evalStringB = '';
var row_idx = delbutton.parentNode.parentNode.rowIndex;
alert("RowIndex: " + row_idx + " Phonelength: " + document.getElementById("phonelength").value);
tbl.deleteRow(row_idx);
counter--;
document.getElementById("phonelength").value = counter;
alert("New Phonelength: " + document.getElementById("phonelength").value);
for (j = row_idx + 1; j < (lastRow-1);j++) {
eval("evalStringA = 'n"+j+"desc'");
eval("evalStringB = 'n"+(j-1)+"desc'");
document.getElementById(evalStringA).setAttribute("name", evalStringB);
document.getElementById(evalStringA).setAttribute("id", evalStringB);
eval("evalStringA = 'n"+j+"number'");
eval("evalStringB = 'n"+(j-1)+"number'");
document.getElementById(evalStringA).setAttribute("name", evalStringB);
document.getElementById(evalStringA).setAttribute("id", evalStringB);
eval("evalStringA = 'n"+j+"delete'");
eval("evalStringB = 'n"+(j-1)+"delete'");
document.getElementById(evalStringA).setAttribute("id", evalStringB);
}
}
The delButton argument to the function is simply a reference to the button itself: onclick="removeRowFromTable(this);" .
I'm pretty sure the delete script is fine, and that the problem lies either in the browser or how the buttons are being created. I'm beginning to wonder if the browswer can read buttons that have been created dynamically. Here is the relevent add row scripting..
// Delete Cell
var delButton = row.insertCell(2);
var del = document.createElement('input');
delButton.width = 55;
del.value = 'Delete';
del.type = 'button';
del.className = "formbuttonWarning";
del.onClick = "removeRowFromTable(this)";
delButton.appendChild(del);
Anyone know what I'm doing wrong?
Thanks again,
Will
p.s. I should mention I am coding this to work in IE6
Beagle
03-16-2006, 07:55 PM
I don't think you can set the handler to a string the way you are trying.
You should do something like this:
del.onClick = function(){removeRowFromTable(del);};
epoch7
03-16-2006, 09:21 PM
Thanks for taking the time to reply. I tried your suggestion and replaced my own line of code with yours. It still did not trigger the event. Out of curiosity I also tried using that function code as a replacement for some of the table rows generated server-side using asp.
My function call attribute onclick="removeRowFromTable(this);" triggers the event handler but yours did not(once again, only on the static html loaded by the web browser).
I find it strange that this would happen considering the browser is parsing the code ahead of time as if it were an html document. You code should at the very last have worked on the pre-existing table roes. I added an alert popup too to double check it but it definitely did not trigger the event.
Does this shine any light on the problem?
Will
Beagle
03-16-2006, 09:29 PM
ahh, right, onClick is wrong
it's onclick
try both yours and mine with
del.onclick =
case-sensitive
epoch7
03-16-2006, 09:35 PM
wow! it works! thank you very much. youve been a very big help. i was just learning how to access the dom in javascript when i ran into this issue and spent days trying many workarounds before i came up with this solution and this was the last piece of the puzzle :)
I tried them both but my solution does not work, yet yours does. I still consider myself rather a novice at this and would like to know why this is the case. I know IE is particularly finicky about upper and lower case attributes(which seems pointless to me), but why does wrapping the function inside yet another function cause it to work? Is there something I could read that would explain such details?
thanks again,
Will
TOP
