fonction Javascript localisation de l'élément droit

Question

Ceci est un balisage partiel:

<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> 

Sur la page il y a beaucoup de lignes comme ça, je veux trouver toutes les lignes où chkBox est marqué, et unhide/cacher la div avec cleintId = 'theTable' ..

Cela fait partie de ma fonction javascript:

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) 

{ 

Comment trouver le div avec clientId 'theTable'?

Answer 1

Je ne sais pas si elle se rapporte à votre question, mais si vous avez besoin de l'ID de la div pour cacher que vous pouvez faire quelque chose comme ceci:

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

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

Ensuite, vous pouvez cacher/montrer quelque chose comme ceci:

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

La sélection des cases à cocher semble juste à partir du code que je vois.

Modifier: OK, la première solution n'est pas bonne. Peut-être après avoir obtenu le chkCtrl de contrôle de case à cocher (= entrées [n]), vous pouvez le faire:

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. 

Notez que ce code non testé, donc je ne suis pas 100% sûr qu'il fonctionnera. Mais c'est l'idée générale. jQuery fait fondamentalement la même chose, mais l'enveloppe bien pour la commodité (beaucoup nécessaire).

Aussi, je vois qu'il y a deux TR incorporés dans votre exemple. Ce n'est pas correct et j'ai supposé qu'il y aurait un seul TR qui contient tout ce balisage HMTL.

Éditer 2: Si vous avez besoin de TRs à venir les uns après les autres, l'idée proposée ne fonctionnera pas directement puisque la div ne sera pas dans les enfants du premier TR. Ce que vous pouvez faire est d'obtenir le TR parent de la case à cocher et d'obtenir le frère suivant (vous pouvez trouver une méthode pour cela ici: Hide an element's next sibling with Javascript). Après avoir trouvé le frère, vous pouvez rechercher à l'intérieur de la div.

Une autre méthode pourrait être utilisée si vous n'avez pas besoin que la table div soit un contrôle ASP (c'est-à-dire si vous pouvez mettre directement une div à la place de l'asp: Panel que vous utilisez). Dans ce cas, vous pouvez contrôler les ID (je suppose que vous utilisez un répéteur pour mettre les articles là-bas):

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

La même valeur peut être utilisée dans la case à cocher:

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

et vous pouvez utiliser cette valeur de la case à cocher pour obtenir la div directement (quelque chose comme ceci):

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

Answer 2

Vous pouvez facilement utiliser jQuery pour ce faire. Je voudrais mettre une classe unique sur vos cases à cocher et divs, comme "myCheck" et "myDiv" ou quelque chose.

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