PROBLEM with passing 'this' pointer

smokey_gun · June 25th, 2007, 05:10 PM

I want to add/delete rows dynamically. But i dont seem to be able to delete them properly. The ones inserted dyanamically can't be deleted
Can some one come up witha solution....

Any help would be appreciated :

------------------------------------------------

<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var tbl=document.getElementById('myTable');
  var lastRow = tbl.rows.length;

  var row = tbl.insertRow(lastRow);

  var imgCell = row.insertCell(0);
  var img = document.createElement("img");

  img.setAttribute("alt", "delete");
  img.setAttribute("id", "del");
  img.setAttribute("src", "trash.gif");
  img.onclick = removeRow('this');
  imgCell.appendChild(img);

  }
</script>
<script type="text/javascript">
function removeRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  }
</script>

</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>

</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row">

</body>
</html>

zaerymoghaddam · June 26th, 2007, 12:06 AM

Dear smokey_gun

When browser reaches "img.onclick = removeRow('this');" statement, tries to run "removeRow" method and pass it a string argument ("this"), and then assign it's return value to "onclick" property of "img" element.

You can't assign an event handler to an element using 'name=value' syntax. You should use an special method of your element (in this case your 'img' element) named 'attachEvent'. It takes two parameters, the first one is string that contains name of event (like "onclick" or "onmousedown") and the latter is name of function that you like to assign to that event.

Note : Remember that second parameter is not a string, it's a function pointer. For example your statement will be changed to :

img.attachEvent("onclick",removeRow);

Bye bye

Ehsan Zaery Moghaddam

smokey_gun · June 26th, 2007, 07:27 PM

doesnt work properly... did you try ti yourself

zaerymoghaddam · June 27th, 2007, 12:16 AM

Sorry smokey_gun

When you attach an event to element, you pass a function pointer to 'attachEvent' and no parameter could be passed to such functions (when they are called in this way).

When user clicks on a remove button that has been added dynamically, 'removeRow' method would be called and will have an argument that is an 'event' object. 'event' object is a global object that you can access it on any event handler function and contains some useful information about currently happening event (like mouse position, key code and etc.).

This object have a property named 'srcElement' that is a reference to an element that has raised this event. You can use this property to access your 'img' element and do what ever you want. So you should change your 'removeRow' method to :

function removeRow(r)
{
    var i = -1;
    if(r.parentNode != null)
    {
        // This method has been called from static rows
        i = r.parentNode.parentNode.rowIndex;
    }
    else if(r.srcElement != null)
    {
        // This method has been called from dynamic rows
        i = r.srcElement.parentNode.parentNode.rowIndex;
    }
    document.getElementById("myTable").deleteRow(i);
}

Ehsan Zaery Moghaddam

smokey_gun · June 27th, 2007, 04:45 PM

Thanx for your help...it worked!!!
But now i'm posed with new problem.
1. the Initial row that I display contains Select boxes which are popolated froma database like this:
  <tr>
        <td>
            <html:select styleClass="Font5" property="model">
            <html:options styleClass="Font5" collection="modList" property="model" labelProperty="model"/>
            </html:select>
        </td>
        <td>
            <html:select styleClass="Font5" property="source">
            <html:options styleClass="Font5" collection="srcList" property="source" labelProperty="source"/>
            </html:select>
        </td>
        <td>
              <select styleClass="Font5" name="freq">
                 <option styleClass="Font5" value="0">M</option>
                  <option styleClass="Font5" value="1">Q</option>
                <option styleClass="Font5" value="2">D</option>
            </select>
        </td>
        <td align="center">
            <input size ="5" type="text" styleClass="Font5" name="F">
        </td>
        <td align="center">
            <input size ="5" type="text" styleClass="Font5" name="T">
        </td>
        <td align="center">
            <input size ="5" type="checkbox" styleClass="Font5" name="G">
        </td>
</tr>

So basically Model & Source get populated by mList & sList collection.
I'm able to add new rows & delete them....But if i delete my Original Row then I'm not able to add new rows.
I think its related to population as the List gets populated only once & if that row is deleted I guess the Collection is lost.
Any solutions???