[QUOTE=7stud]Yes…and you can always try it. In js, you can add properties to any object at will. For instance, you can do this:
ok well according to the above suggestion I have tried the following but I get a type mismatch error
function removerow(a){
document.getElementById('secondtable').deleteRow(a);
addRowToTable();
}
function addRowToTable()
{
var tbl = document.getElementById('secondtable');
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);
// left cell
var cell1 = row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell();
var cell4=row.insertCell();
var e1= document.createElement('input');
e1.setAttribute('type','text');
e1.setAttribute('name','field'+4);
cell2.appendChild(e1);
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('name','button'+iteration);
buttonnode.setAttribute('value','sal');
removerow.a=iteration;
buttonnode.attachEvent('onclick',removerow.a);//require this particular row to be deleted
cell1.appendChild(buttonnode);
}
this is what I have added in:
removerow.a=iteration;
buttonnode.attachEvent('onclick',removerow.a);//require this
Huh? The second parameter of attachEvent must be a function reference, which is a function name without the function execution operator: (). That means the variable:
removerow.a
has to be a function reference. This is what you did:
First, you could dispense with all that and just do this:
removerow.a = tbl.rows.length;
However, tbl.rows.length is an integer value and not a function reference. I answered a question by JRMillion that really had nothing to do with your script, so I don’t know why you decided to modify your code in that way.
If you didn’t like the solutions I proposed in post #14, and you want to get tricky and apply that object stuff I was discussing with JRMillion in order to pass an argument to the function, you could do this:
removerow.a = interation;
buttonnode.attachEvent(‘onclick’,removerow)
Then in the removerow() function, you could do this:
function removerow()
{
alert(removerow.a);
}
But once again, attachEvent() is not crossbrowser, and it’s so much easier to type:
I understand this is a parameter issue and that they cannot be sent over
for a little example I have done this:
var display;
function Hi()
{
alert(display);
}
var buttonnode= document.createElement(‘input’);
buttonnode.setAttribute(‘type’,‘button’);
buttonnode.setAttribute(‘name’,‘button’+iteration);
buttonnode.setAttribute(‘value’,‘sal’); //removerow.a =iteration;
buttonnode.attachEvent(‘onclick’,Hi);//require this particular row to be deleted
buttonnode.onclick = function(){Hi(this, iteration)};
cell1.appendChild(buttonnode);
but when I click on the button and the alert jus outputs undefined and not the value of iteration…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IE Bug ?</title>
<script>
function showit(){
alert('ok')
}
// Cherche l'élément 'bug' et insère un lien qui affiche 'ok' quand on clique
// Fonctionne sous Mozilla et Opera mais pas sous IE 6
function testIE(){
var elem = document.getElementById("bug");
var newtag = document.createElement("a");
newtag.setAttribute("id","lien")
newtag.setAttribute("onclick",function(){alert('coucou')})
newtag.onclick=function(){alert('coucou')};
newtag.setAttribute("style","cursor:pointer")
newtag.appendChild(document.createTextNode("click"));
elem.appendChild(newtag);
document.getElementById('lien').style.cursor='hand, pointer'
}
</script>
</head>
<body>
<input type="button" value="test!" OnClick="testIE()"/>
<div id="bug"></div>
</body>
</html>
onclik attribution is doubled to ensure compatibility with IE and FFX
but when I click on the button and the alert jus outputs undefined and not the value of iteration…
Where did you define interation anywhere in your example:
var display;
function Hi()
{
alert(display);
}
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('name','button'+iteration);
buttonnode.setAttribute('value','sal');
//removerow.a =iteration;
buttonnode.attachEvent('onclick',Hi);//require this particular row to be deleted
buttonnode.onclick = function(){Hi(this, iteration)};
cell1.appendChild(buttonnode);
Also, get rid of any line with attachEvent() and get rid of any setAttribute() line that tries to set an onclick event because they are both not crossbrowser. To set an event handler all you need is a line like this:
buttonnode.onclick = some_function;
Finally, since you seem to be having a lot of trouble with that concept, I suggest you put your event handlers inline in the html:
ok think I have come up with the solution of sending the parameter across but the thing is now it just removes the last row and not the button row any suggestions as to how I can retrieve the row of the button I have created…as the row is added at the end of the table I assumed that its index would be last row but this does not seem to be the case
function remove1()
{
var num=remove1.a;
document.getElementById(‘secondtable’).deleteRow(num);
}
var tbl = document.getElementById('secondtable');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('name','button'+iteration);
buttonnode.setAttribute('value','sal');
remove1.a =iteration;
buttonnode.attachEvent('onclick',remove1);//require this particular row to be deleted
This is because your “remove1.a” value gets overwritten by this line
remove1.a =iteration;
and this code
var num=remove1.a;
uses the last value of “remove1.a”.
This is the way how closures work, and you have to create extra scope to work around this. The good news are that there is actually no need to pass “iteration” to event hanlder, because you can use row’s “rowIndex” property instead.
The example is an old code I digged up from my library, probably in more recent version of browsers last line is sufficient …
For setAttrib I did not claim anything I just rememberedr I havd a code somewhere that got me out of a similar problem I encountererd e few years ago …
just to clarify the matter i have a button associated with each row when clicking upon the button it should delete the corresponding row. I would appreciate if you could demonstrate how I would use rowIndex to find the index to the row…
but I am actually creating the row in javascript then trying to delete the row:
here is the code that I have tried but I think this.rowIndex is just deleting the first row:
function remove1()
{
var num=remove1.a;
var mytable= document.getElementById(‘secondtable’);
document.getElementById(‘secondtable’).deleteRow(this.rowIndex);
}
function addRowToTable()
{
var tbl = document.getElementById(‘secondtable’);
var lastRow = tbl.rows.length;
// if there’s no header row in the table, then iteration = lastRow + 1
var iteration = lastRow-1;
alert(iteration);
var row = tbl.insertRow(lastRow);
// left cell
var cell1 = row.insertCell(0);
alert(lastRow +“hello”);
var cell2=row.insertCell(1);
var cell3=row.insertCell();
var cell4=row.insertCell();
var e1= document.createElement('input');
e1.setAttribute('type','text');
e1.setAttribute('name','field'+4);
cell2.appendChild(e1);
var buttonnode= document.createElement('input');
buttonnode.setAttribute('type','button');
buttonnode.setAttribute('name','button'+iteration);
buttonnode.setAttribute('value','sal');
remove1.a =iteration;
buttonnode.attachEvent('onclick',remove1);//require this particular row to be deleted
//buttonnode.attachEvent('onclick',removerow);//require this particular row to be deleted
//buttonnode.onclick = function(){Hi(this, iteration)};
cell1.appendChild(buttonnode);
//buttonnode.onclick = Hi;
In js, you can add properties to any object at will. For instance, you can do this: