Javascript Html显示隐藏内容_Javascript_Jquery_Html_Css

Javascript Html显示隐藏内容

javascript jquery html css

Javascript Html显示隐藏内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图找到一个OnClick函数，它将在表中工作当页面加载时，他们的内容需要隐藏，但提供了一个选项，但按钮或链接显示它 <div id="table-container"> <table id="maintable" border="1" cellspacing="0" cellpadding="1"> <thead> <th class="blk" nowrap>Number</th> <th class="blk

我试图找到一个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>


数字
原名
译名
两把枪
两把枪
英语、西班牙语
109

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

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

两把枪
英语、西班牙语
109

或者把他们藏起来

我已尝试使用以下输入

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


函数showHide（shID）{
if（document.getElementById（shID））{
if（document.getElementById（shID+'-show'）.style.display！=“无”）{
document.getElementById（shID+'-show'）.style.display='none'；
document.getElementById（shID.style.display='block'；
}
否则{
document.getElementById（shID+'-show'）.style.display='inline'；
document.getElementById（shID.style.display='none'；
}
}
}

似乎要做的只是在表格的单元格中提升文本，而不是表格

更新：似乎无法确切了解您想要做什么，因此我将尝试涵盖显而易见的内容。我假设您自己编写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>


$（文档）.ready（函数（）{
$（'.hidethis'）.hide（）；
$（'.toggle'）。单击（函数（）{
section=$（this.attr（'data-section'）；
$（section+'.hidethis'）.toggle（）；
});
});
第一节
始终可见
把这个藏起来
始终可见
把这个藏起来
第二节
始终可见
把这个藏起来
始终可见
把这个藏起来
切换段1
切换段2

每个项目一个切换：

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


$（文档）.ready（函数（）{
$（'.hidethis'）.hide（）；
$（'.toggle'）。单击（函数（）{
$（'.hidethis'，$（this.parent（））.toggle（）；
});
});
始终可见

切换这个
把这个藏起来
始终可见

切换这个
把这个藏起来

在本例中，请注意，为了不使jQuery代码过于复杂，您需要一种同时作为标题和可扩展内容的父级的容器。

在进行了更多搜索之后，我发现

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


函数切换（）{
if（document.getElementById（“hidethis”）.style.display=='none'）{
document.getElementById（“hidethis”）.style.display=''；
}否则{
document.getElementById（“hidethis”）.style.display='none'；
}
}
切换


始终可见
把这个藏起来
始终可见

这是一种享受，我发现它的问题是，我不知道如何让它只做一排。。但在其他帖子中，有人提到使用

<tbody>

所以我做了一些我需要的。。现在我已经包括了一个按钮，我已经完成了：）

谢谢你的帮助，虽然

好的，有人帮过我，这是解决问题的办法

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


$（文档）.ready（函数（）{
$（文档）.on（'keyup'，'#搜索框'，函数（）{
$（'#主表tbody:not（.myContent'）。每个（函数（）{
var movieTitle=$（this.find（'td:nth child（2）'））.text（）；
if（RegExp（$（'#搜索框'）.val（），'i'）.test（movieTitle））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
});
});
不要隐藏
不要隐藏
不要隐藏
把这个藏起来
隐藏此/td>
把这个藏起来

这就是解释，代码在哪里？很抱歉，我从未在这样的网站上发布过，我希望我输入的代码是正确的。我认为没有必要进行冗长的介绍。。。相反，告诉人们你是想在点击时隐藏项目还是什么。你想退色吗？你想让下面的东西填满吗？请描述更多！我真的很抱歉，我只是想确保我涵盖了所有的基础知识，因为我发现很难描述我要做的事情，因为我不是一个真正精通HTML的人。但是我有办法去尝试。我现在已经改变了我的介绍，还包括了更多的编码来尝试和帮助我的目标。好的，我想我已经完成了，但我没有。这段代码所做的就是让它工作。我该怎么做才能让我拥有无限的数量？这只适用于一个特定的部分。。我需要的是能够使它按类名隐藏，这是我发现的最有可能的选项。。class=“hidethis1”class=“hidethis2”等等，然后是这些类中的任何内容