Home/ Questions/Q 9052857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T13:17:00+00:00

I’m really new to JavaScript but I can’t find out why this program won’t

  • 0

I’m really new to JavaScript but I can’t find out why this program won’t work.
I want when I click the dynamically created button which is situated in a cell in my dynamically created table to get the rowindex of the row in which the button is situated.

Thanks in advance – here is my code:

<html>
    <head>
        <script>
            function whichrow(obj) {
                var par = obj.parentNode;
                while(par.nodeName.toLowerCase()! = 'tr') {
                    par = par.parentNode;
                }
                alert(par.rowIndex);
            }
        </script>
    </head>
    <body> 
        <script>
        mybody = document.getElementsByTagName("body")[0];
        mytable = document.createElement("table");
        mytablebody = document.createElement("tbody");
        for(var i = 0; i<5; i++) {
            mycurrent_row = document.createElement("tr"); 
            mycurrent_row.id = "row"+i;

            for(var j = 0; j<4; j++) {
                mycurrentcell = document.createElement("td");  
                currenttext = document.createTextNode("Row" + i + "Column" + j);
                mycurrentcell.appendChild(currenttext);
                mycurrent_row.appendChild(mycurrentcell);
            }   
            mybutoncell = document.createElement("td");
            but = document.createElement("button");
            mybutoncell.appendChild(but);

            mycurrent_row.appendChild(mybutoncell);

            mytablebody.appendChild(mycurrent_row);
            but.onClick = whichrow(this);
        }
        mytable.appendChild(mytablebody);
        mybody.appendChild(mytable);

        mytable.setAttribute("border", "2"); 
        </script>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, so a few points to note here.

    In the javascript eventing system, the system calls your callback with its own event object containing different properties according to what happened.

    So, here are the mistakes:

    1. When you’re assigning to the event handler, when you say but.onclick = whichrow(this) you’re setting but.onclick to the result of whichrow, which is undefined since you’re not returning anything anyway. It should be but.onclick = whichrow; which will call whichrow when the user clicks your button. The parameter passed is a MouseEvent object. The link I’ve supplied should serve as a good start to read up on what kind of properties are available to you.

    2. I have to check, since I use el.addEventListeners a lot, but onclick needs to be in lower case, not camelCase like you’ve done.

    3. Inside the event callback, this usually refers to the element that was clicked, so you should use that.

    4. There is no rowIndex property.

    Now, trying to find a solution to your problem. rowIndex can be gleaned by traversing the dom. I’m not sure what purpose this will serve since you’re creating the DOM by hand anyway and know the rowIndex already, but if it were unknown, here’s what I would do

    function whichRow(e) {
  // here this should be the button.
  var curRow = this.parentElement.parentElement,
      rowIndex = 0;

  while(curRow) {
    curRow = curRow.previousElementChild; 
    rowIndex++;
  }

  return rowIndex;
}

    I’m writing this off the top of my head, but the point is to give the main idea. In the above snippet, I’ve taken the parent of the parent of the button, since here’s the approximate markup of the button section:

    <tr>
  <td>
    <button></button>
  </td>
</tr>

    so, the parentElement of the parentElement of the button element should give you the <tr>. Then we’ll traverse backwards till we don’t have any previous elements, counting as we go. Once the previous element is null, return the count.

    • 0