DOM javascript Navigation

Question

I want to unhide the hidden divCommentBody div that belongs to the "checked" checkbox, but can't find it using javascript.

This is javascript function:

 function ExpandClick(state) {       

          var TargetBaseControl = document.getElementById("commentsTable");
          var Inputs = TargetBaseControl.getElementsByTagName('input');

          for (var n = 0; n < Inputs.length; ++n) if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf('chkBox', 0) >= 0) {       if (Inputs[n].checked == true) {

            //Get divCommentBody div that belongs to this chekbox

              }
          }
      }

This is the markup:

<table cellpadding="0" border="0"  id="commentsTable">
               <tr class="Comment">        
                 <td  class="CommentCheck">
                      <input id="ctl00_col2_rptComments_ctl01_chkBox" type="checkbox" name="ctl00$col2$rptComments$ctl01$chkBox" />                     
                  </td>               
                 <td class="CommentBy" >
                        <span id="ctl00_col2_rptComments_ctl01_lblUserName" title="Posted by name">someone</span>                      
                 </td>               
               <tr>
                 <td colspan="100%">
                    <div id="ctl00_col2_rptComments_ctl01_divCommentBody" style="padding: 0 0 0 55px;display:none;background-color: #E8F1F4;">                                                                            
                    </div>                                                           
                 </td>
               </tr>                                                                                    
               <tr class="Comment">        
                 <td  class="CommentCheck">
                    <input id="ctl00_col2_rptComments_ctl02_chkBox" type="checkbox" name="ctl00$col2$rptComments$ctl02$chkBox" />               
                 </td>
                 <td class="CommentBy" >
                     <span id="ctl00_col2_rptComments_ctl02_lblUserName" title="Posted by name">marco</span>                      
                 </td>                
               <tr>
                 <td colspan="100%">
                    <div id="ctl00_col2_rptComments_ctl02_divCommentBody" style="padding: 0 0 0 55px;display:none;background-color: #E8F1F4;">                                        

                    </div>                                                           

                 </td>
             </tr>         

        </table>

Answer 1

You can get it like this:

var divId = Inputs[n].id.replace(/chkBox$/, 'divCommentBody');
var div = document.getElementById(divId);

Answer 2

Alternatively, if using Sizzle (jQuery example):

$('[id$="_divCommentBody"]')

Alternatively to my alternative, if the table structure won't be changing:

$('#commentsTable tr:last-child div')