Solved

How to get an rowindex on a table cell click

Posted on 2006-10-25
6
1,363 Views
Last Modified: 2011-10-03
Hi,

I have a html table defined as:

<table>

                 <tr style="color:Black;font-size:8pt;">
                 <td nowrap="nowrap" style="background-color:#E9E9FF;">
                     <input id="dgDOCGrid__ctl2_DeleteThis" type="checkbox" name="dgDOCGrid:_ctl2:DeleteThis" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl2:txtFunc" type="text" id="dgDOCGrid__ctl2_txtFunc" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl2:txtASPx" type="text" value="iol.asp" id="dgDOCGrid__ctl2_txtASPx" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl2:txtTableName" type="text" value="ac" id="dgDOCGrid__ctl2_txtTableName" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl2:txtFieldName" type="text" value="ac" id="dgDOCGrid__ctl2_txtFieldName" disabled="disabled" />
                  </td><td>
                     <input id="dgDOCGrid__ctl2_chkDelete" type="checkbox" name="dgDOCGrid:_ctl2:chkDelete" />
                  </td><td>
                     <input id="dgDOCGrid__ctl2_chkInsert" type="checkbox" name="dgDOCGrid:_ctl2:chkInsert" />
                  </td><td>
                     <input id="dgDOCGrid__ctl2_chkUpdate" type="checkbox" name="dgDOCGrid:_ctl2:chkUpdate" checked="checked" />
                  </td><td>
                     <input id="dgDOCGrid__ctl2_chkRead" type="checkbox" name="dgDOCGrid:_ctl2:chkRead" checked="checked" />
                  </td><td>
                     <a id=1800 href=javascript:getComment('1800') class="listitem">...</a>
                     <input name="dgDOCGrid:_ctl2:hdnComment" id="dgDOCGrid__ctl2_hdnComment" type="hidden" />
                  </td>
      </tr>
                <tr style="color:Black;background-color:#FFFFCC;font-size:8pt;">
        <td nowrap="nowrap" style="background-color:#E9E9FF;">
                     <input id="dgDOCGrid__ctl3_DeleteThis" type="checkbox" name="dgDOCGrid:_ctl3:DeleteThis" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl3:txtFunc" type="text" id="dgDOCGrid__ctl3_txtFunc" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl3:txtASPx" type="text" value="iol.asp" id="dgDOCGrid__ctl3_txtASPx" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl3:txtTableName" type="text" value="ac" id="dgDOCGrid__ctl3_txtTableName" />
                  </td><td>
                     <input name="dgDOCGrid:_ctl3:txtFieldName" type="text" value="descrip" id="dgDOCGrid__ctl3_txtFieldName" disabled="disabled" />
                  </td><td>
                     <input id="dgDOCGrid__ctl3_chkDelete" type="checkbox" name="dgDOCGrid:_ctl3:chkDelete" />
                  </td><td>
                     <input id="dgDOCGrid__ctl3_chkInsert" type="checkbox" name="dgDOCGrid:_ctl3:chkInsert" />
                  </td><td>
                     <input id="dgDOCGrid__ctl3_chkUpdate" type="checkbox" name="dgDOCGrid:_ctl3:chkUpdate" />
                  </td><td>
                     <input id="dgDOCGrid__ctl3_chkRead" type="checkbox" name="dgDOCGrid:_ctl3:chkRead" checked="checked" />
                  </td><td>
                     <a id=1802 href=javascript:getComment('1802') class="listitem">...</a>
                     <input name="dgDOCGrid:_ctl3:hdnComment" id="dgDOCGrid__ctl3_hdnComment" type="hidden" />
                  </td>
              </tr>
</table>

When the user click on the hyper link of <a href> with an id=1802, how do I know that is a second row in the javascript getComment('1802')?

Many thanks
0
Comment
Question by:tnova1
  • 3
  • 3
6 Comments
 
LVL 5

Expert Comment

by:daohailam
ID: 17805480
You should do like this:

<script>
function getComment(link) {
      var row = link.parentNode.parentNode;
      var table = row.parentNode;
      for (var i = 0; i < table.rows.length; i++)
            if (row == table.rows[i]) {
                  alert(link.id + ': ' + i);
                  return i;
            }
      return -1;
}
</script>

<a id="1800" href="#" onclick="getComment(this)" class="listitem">...</a>
...
<a id="1802" href="#" onclick="getComment(this)" class="listitem">...</a>
0
 

Author Comment

by:tnova1
ID: 17806050
Hi Dao,

the link.parentNode is not working. It is not un object

Diane
0
 

Author Comment

by:tnova1
ID: 17806144
Hi Dao,

Off course, I like your code because I only need one for loop.  But the link.parentNode is not working, it return an unidentify object.  I think this is a DOM object, not html table.
Here is my code:
         function getComment(varCount)
         {
          //IF COMMENT EXISTS, DISPLAY IN EDITABLE POPUP - IF NOT, DISPLAY EMPTY POPUP - THEN SAVE THE INPUT TO THE HIDDEN INPUT
            var strControlName;
            var control;
            var table = document.getElementById("dgDOCGrid");
               varCount = "getComment('" + varCount + "')";
               var rows =  table.getElementsByTagName("tr");
               for (i = 0; i < rows.length + 1; i++)
               {
                  var cols = rows[i].getElementsByTagName("td");
                  for (n = 0; n < cols.length; n++)
                  {
                     strHTML = cols[n].innerHTML;
                     if (strHTML != null)
                        if (strHTML.indexOf(varCount) > 0)
                        {
                           strControlName = "dgDOCGrid__ctl" + i + "_hdnComment";
                           control = document.getElementById(strControlName);
                            if (control != null)                           
                                break;
                          }
                  }
                  if (control != null)
                  break;
               }

Let me know if you know how to make the parentNode work.
Thanks,
Diane
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 5

Expert Comment

by:daohailam
ID: 17806268
Hmm, strange, it works well here on both IE6 & FF. Anyway, try this one:

1. Is it ok, if we change from this one
                  <td>
                     <a id=1802 href=javascript:getComment('1802') class="listitem">...</a>
                     <input name="dgDOCGrid:_ctl3:hdnComment" id="dgDOCGrid__ctl3_hdnComment" type="hidden" />
                  </td>
   to this one:
                  <td id="1802" onclick="getComment(this)" class="listitem">...
                     <input name="dgDOCGrid:_ctl3:hdnComment" id="dgDOCGrid__ctl3_hdnComment" type="hidden" />
                  </td>

2. If ok, try this script:

<script>
function getComment(cell) {
     var row = cell.parentNode;
     var table = row.parentNode;
     for (var i = 0; i < table.rows.length; i++)
          if (row == table.rows[i]) {
               alert(link.id + ': ' + i);
               return i;
          }
     return -1;
}
</script>

Still not sure, if parentNode does not exist.
0
 

Author Comment

by:tnova1
ID: 17806696
No, as I already said that parentNode is not a html.table property.  Off course I did change getComment('1802') to getComment(this).

The IE is version 6.  

0
 
LVL 5

Accepted Solution

by:
daohailam earned 500 total points
ID: 17810309
Ok, just try to simplify your code a litte bit.  Because each row just has only 1 <a>, we can try this code:

function getComment(varCount)
{
    //IF COMMENT EXISTS, DISPLAY IN EDITABLE POPUP - IF NOT, DISPLAY EMPTY POPUP - THEN SAVE THE INPUT TO THE HIDDEN INPUT
    var strControlName;
    var control;
    var table = document.getElementById("dgDOCGrid");
    var rows = table.getElementsByTagName("tr"); //  <==  We can use "table.rows" here
    for (i = 0; i < rows.length + 1; i++) {
       var a = rows[i].getElementsByTagName("a");
       if (a.length && a[0].id == varCount) {
           strControlName = "dgDOCGrid__ctl" + i + "_hdnComment";
           control = document.getElementById(strControlName);
           break;
        }
    }
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now