Javascript function locating right element

Question

This is partial markup:

 <tr class="Comment">        
    <td  class="CommentCheck">
       <input id="ctl00_col2_rptComments_ctl01_chkBox" type="checkbox" name="ctl00$col2$rptComments$ctl01$chkBox" /> 
       <input type="hidden" name="ctl00$col2$rptComments$ctl01$hdnFldItemID" id="ctl00_col2_rptComments_ctl01_hdnFldItemID" value="35" />
    </td>

    <td class="CommentBy" >
        <span id="ctl00_col2_rptComments_ctl01_lblUserName" title="Posted by name">Jack</span>                         

    <tr>
        <td colspan="100%" class="BodyComment">
            <div id="ctl00_col2_rptComments_ctl01_TheTable" style="padding: 0 0 0 40px;display:none;">                   

                <span id="ctl00_col2_rptComments_ctl01_TextBox1" style="display:inline-block;width:75%; border: thin solid #000000;padding: 4px 4px 4px 4px;">I know it all now!</span>

            </div>                                         

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

On the page there are many rows like that, I want to find all rows where chkBox is marked, and unhide/hide the div with cleintId='TheTable'..

This is part of my javascript function:

  function SelectClick() {

            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)

 {

How to locate the div with clientId 'TheTable'?

Answer 1

Not sure if it relates to your question, but if you need the ID of the div to hide you can do something like this:

<asp:Panel ID="TheTable" runat="server">...</asp:Panel>

<script...>
... var div = document.getElementById('<%= TheTable.ClientID %>')
</script>

Then you can hide/show it with something like this:

div.style.display = 'none'; // hide
div.style.display = 'block'; // show

The selection of the checkboxes seems right from the code I'm seeing.

Edit: OK, the first solution is not good. Maybe after obtaining the checkbox control chkCtrl (=Inputs[n]) you can do this:

var trCtrl = chkCtrl.parentNode.parentNode; // Should be the parent TR
var divCtrl = trCtrl.getElementsByTagName('div')[0]; // I assume it will always find a div there and that your table is the only div.

Note that this is untested code, so I'm not 100% sure it will work. But this is the general idea. jQuery does basically the same thing, but wraps it nicely for (much needed) convenience.

Also I see there are two embedded TRs in your example. This is not correct and I assumed there would be a single TR that contains all that HMTL markup.

Edit 2: If you need the TRs to come one after the other then the proposed idea won't work directly since the div won't be inside the children of the first TR. What you can do is to obtain the parent TR of the checkbox and obtain the next sibling (you can find a method for that here: http://stackoverflow.com/questions/868407/hide-an-elements-next-sibling-with-javascript). After you find the sibling you can search inside for the div.

Another method could be used if you don't need the table div to be an ASP control (i.e. if you can put directly a div instead of the asp:Panel that you use). In this case you could control the IDs (I assume you use a repeater to put the items there):

<div id="theTable<%# Container.ItemIndex %>"...>...</div>

The same value could be used in the checkbox:

Value="<%# Container.ItemIndex %>"...

and you could use that value from the checkbox to get the div directly (something like this):

var div = document.getElementById('theTable' + chkCtrl.value)

Answer 2

You could easily use jQuery to do this. I would put a unique class on your checkboxes and divs, like "myCheck" and "myDiv" or something.

$(".myCheck").each(function () {
  if ($(this).is(":checked")) {
    $(this).parent("tr").find(".myDiv").show();
  } else {
    $(this).parent("tr").find(".myDiv").hide();
  }
});