Javascript函数定位正确的元素

Question

这是部分标记：

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

在页面上有很多这样的行，我想找到标记 chkBox 的所有行，并使用 cleintId='TheTable' 取消隐藏/隐藏 div..

这是我的 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)

 {

如何找到clientId为'TheTable'的div？

Answer 1

不确定它是否与您的问题有关，但如果您需要隐藏 div 的 ID，您可以执行以下操作：

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

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

然后你可以用这样的方式隐藏/显示它：

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

复选框的选择似乎与我看到的代码一样。

编辑：好的，第一个解决方案不好。也许在获得复选框控件 chkCtrl (=Inputs[n]) 之后，您可以这样做：

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.

请注意，这是未经测试的代码，所以我不能 100% 确定它会起作用。但这是一般的想法。 jQuery基本上做同样的事情，但是为了（非常需要的）方便而很好地包装了它。

我还看到您的示例中有两个嵌入式 TR。这是不正确的，我认为会有一个包含所有 HMTL 标记的 TR。

编辑 2：如果您需要 TR 一个接一个地出现，那么建议的想法将不会直接起作用，因为 div 不会位于第一个 TR 的子项中。您可以做的是获取复选框的父 TR 并获取下一个兄弟（您可以在此处找到一种方法：Hide an element's next sibling with Javascript）。找到兄弟后，您可以在里面搜索 div。

如果您不需要表格 div 作为 ASP 控件（即，如果您可以直接放置一个 div 而不是您使用的 asp:Panel），则可以使用另一种方法。在这种情况下，您可以控制 ID（我假设您使用中继器将项目放在那里）：

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

复选框中可以使用相同的值：

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

您可以使用复选框中的值直接获取 div（类似这样）：

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

Answer 2

您可以轻松地使用 jQuery 来执行此操作。我会在您的复选框和 div 上放置一个独特的类，例如“myCheck”和“myDiv”之类的。

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