Question

我正在尝试找到一个可在表格内工作的OnClick函数。

当页面加载时，他们需要隐藏内容，但是只给出一个选项，但只显示按钮或链接。

<div id="table-container">
<table id="maintable" border="1" cellspacing="0" cellpadding="1">
  <thead>
  <th class="blk" nowrap>Number</th>
  <th class="blk" nowrap>Original Title</th>
  <th class="blk" nowrap>Translated Title</th>
  </thead>
<tbody>
<td class="lgt"><font size="4">2 Guns&nbsp;</font></td>
<tr><td class="lgt"><font size="4">Two Guns&nbsp;</font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish&nbsp;</font></td></tr>
<tr><td class="lgt"><font size="4">109&nbsp;</font></td></tr>

这大致是我想要做的，是能够隐藏

<tr><td class="lgt"><font size="4">Two Guns&nbsp;</font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish&nbsp;</font></td></tr>
<tr><td class="lgt"><font size="4">109&nbsp;</font></td></tr>

和/或取消隐藏它们。

我尝试过使用以下输入..

<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
  if (document.getElementById(shID+'-show').style.display != 'none') {
     document.getElementById(shID+'-show').style.display = 'none';
     document.getElementById(shID).style.display = 'block';
  }
  else {
     document.getElementById(shID+'-show').style.display = 'inline';
     document.getElementById(shID).style.display = 'none';
   }
  }
}
</script>
<div id="wrap">
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">See more.</a></p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
</div>

似乎所有这一切都是提升表格单元格中的文本，而不是表格。

Answer 1

更新：您似乎无法获得完全您想要做的事情，因此我将尝试覆盖显而易见的事实。我假设您自己编写HTML并且没有收到某些服务器端脚本的输出，尽管这是最合理的。如果您正在编写HTML代码，这意味着您可以根据需要添加类，ID和标记而不会出现问题。我肯定会做一些完全不同的事情，但这意味着更复杂的代码。

有多个部分。每个部分的切换：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
        <script>
            $(document).ready(function(){
                $('.hidethis').hide();

                $('.toggle').click(function(){
                    section = $(this).attr('data-section');
                    $(section + ' .hidethis').toggle();
                });
            });
        </script>
    </head>
    <body>
        <table id='section-1' border="1">
            <caption>SECTION 1</caption>
            <tr>
                <td>Always visible</td>
            </tr>
            <tr class="hidethis">
                <td>Hide this</td>
            </tr>
            <tr>
                <td>Always visible</td>
            </tr>
            <tr class="hidethis">
                <td>Hide this</td>
            </tr>
        </table>
        <table id='section-2' border="1">
            <caption>SECTION 2</caption>
            <tr>
                <td>Always visible</td>
            </tr>
            <tr class="hidethis">
                <td>Hide this</td>
            </tr>
            <tr>
                <td>Always visible</td>
            </tr>
            <tr class="hidethis">
                <td>Hide this</td>
            </tr>
        </table>
        <div class='toggle' data-section='#section-1'>Toggle section 1</div>
        <div class='toggle' data-section='#section-2'>Toggle section 2</div>
    </body>
</html>

每个项目一次切换：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
        <script>
            $(document).ready(function(){
                $('.hidethis').hide();

                $('.toggle').click(function(){
                    $('.hidethis', $(this).parent()).toggle();
                });
            });
        </script>
    </head>
    <body>
        <table id='section-1' border="1">
            <tr>
                <td>
                    <table>
                        <tr class='toggle'>
                            <td>
                                Always visible<br/>
                                <small>Toggle this</small>
                            </td>
                        </tr>
                        <tr class="hidethis">
                            <td>Hide this</td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <table>
                        <tr class='toggle'>
                            <td>
                                Always visible<br/>
                                <small>Toggle this</small>
                            </td>
                        </tr>
                        <tr class="hidethis">
                            <td>Hide this</td>
                        </tr>
                    </table>
                </td>
            </tr>                   

        </table>

    </body>
</html>

在这种情况下，请注意，为了不使jQuery代码过于复杂，您需要某种容纳标题和可扩展内容的容器。

Answer 2

经过更多的搜索，我发现了......

<html>
<head>
<script>
function toggle() {
 if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
 }else{
   document.getElementById("hidethis").style.display = 'none';
 }
}
</script>
</head>
<body>

<span onClick="toggle();">toggle</span><br /><br />

<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

它是一种享受，我发现它的问题，是我无法弄清楚如何使它做的不仅仅是一行..但在其他帖子有人提到使用..

<tbody>

所以我做了我需要的那些..现在我已经包含了一个按钮，我完成了它:) 谢谢你的帮助

Answer 3

好的，有人帮我这个，这就是让它成为一种享受的解决方案。

<script type='text/javascript'>
$(document).ready(function(){
    $(document).on('keyup', '#search-box', function(){
    $('#maintable tbody:not(.myContent)').each(function(){
      var movieTitle = $(this).find('td:nth-child(2)').text();
      if (RegExp($('#search-box').val(), 'i').test(movieTitle)) {
        $(this).show();
       } else {
        $(this).hide();
       }
    });
  });
});
</script>

<tr><!-- FIX: Needed to wrap it in a row -->
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
</tr>   
<tbody class="myContent" style="display:none;">
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This/td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr><!-- FIX: close row -->
</tbody>

Html显示隐藏内容

3 个答案: