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();
  }
});

Javascript函数定位右元素

2 个答案: