点击按钮过滤表格单元格

时间：2016-12-07 18:26:02

标签： html css tablecell tablefilter

***更新为包含JSFiddle尝试的JQuery。

我插入了三个按钮，尝试根据类 - 培训，工具和案例来过滤表格单元格，但是我很茫然。我的目标是单击按钮，只看到与按钮相关的内容。例如，如果我单击训练，则只会显示带有类训练的表格单元格。

任何帮助将不胜感激。

谢谢！

<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="width=700">
<title>Title</title>
<style>

.OurWorkHeader {
  margin: 0;
  width: 100%;
  background-color: #9c9b9b;
}

.OurWorkHeader ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  background-color: none;
}

.OurWorkHeader li {
  float: right;
}

.OurWorkHeader li a {
  display: block;
  color: #062f4f;
  font-family: "Footlight MT Light";
  font-size: 28px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.OurWorkHeader li a:hover {
  background-color: #F7B733;
  color: #ffffff;
}

.OurWorkHeader h1 {
  font-family: "Footlight MT Light";  
  font-size: 100px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.OurWorkHeader h2 {
  font-family: "Garamond";  
  font-size: 52px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  text-align: center;
}

.OurWorkHeader p {
  font-family: "Garamond";  
  font-size: 18px;
  font-weight: none;
  margin: 0;
  color: #ffffff;
  width: 100%
  text-align: center;
}

.OurWorkHeader a {
  color: #FC4A1A;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#OurWork1 {
  width: 100%;
  margin: 0;
 }

.OurWork1-layer {
  background-size: cover;
  background-color: #9c9b9b;
  width: 100%;
}

.OurWorkBody1 {
  margin: 0
}

.OurWorkBody1 h1 {
  font-family: "Footlight MT Light";  
  font-size: 56px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody1 h2 {
  font-family: "Garamond"; 
  color: #F7B733; 
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding-top: 10px;  
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody1 p {
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: none;
  margin: 0;
  color: #ffffff;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.OurWorkBody1 a {
  color: #ffffff;
      font-family: "Garamond";  
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
}

.OurWorkBody2 {
  margin: 0
}

.OurWorkBody2 h1 {
  font-family: "Footlight MT Light";  
  font-size: 56px;
  font-weight: bold;
 margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody2 h2 {
  font-family: "Garamond"; 
  color: #F7B733; 
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding-top: 10px;  
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody2 p {
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: none;
  margin: 0;
  color: #ffffff;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.OurWorkBody2 a {
  color: #ffffff;
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
}

.OurWorkBody3 {
  margin: 0
}

.OurWorkBody3 h1 {
  font-family: "Footlight MT Light";  
  font-size: 56px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody3 h2 {
  font-family: "Garamond"; 
  color: #F7B733; 
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding-top: 10px;  
  padding-right: 10px;
  padding-left: 10px;
}

.OurWorkBody3 p {
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: none;
  margin: 0;
  color: #ffffff;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.OurWorkBody3 a {
  color: #ffffff;
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
}

.ChildFooter{
  margin: 0;
}

.ChildFooter h1 {
  font-family: "Footlight MT Light";  
  font-size: 56px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.ChildFooter h2 {
  font-family: "Footlight MT Light";  
  font-size: 52px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.ChildFooter h4 {
  font-family: "Footlight MT Light";  
  font-size: 32px;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  padding-right: 10px;
  padding-left: 10px;
}

.ChildFooter p {
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: none;
  margin: 0;
  color: #ffffff;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.ChildFooter a {
  color: #ffffff;
  font-family: "Garamond";  
  font-size: 24px;
  font-weight: bold;
  text-decoration: underline;
}

.ChildFooter {
  border-collapse: collapse;
  margin: 0;
}

#ChildFooterRow1 {
  border-collapse: collapse;
  margin: 0;
    width: 100%;
    }

    table td#IdeasColumn { 
      border-collapse: collapse;
      background-color:#9c9b9b;
  text-align: left;
  vertical-align: top;  
}

table td#CaseStudiesColumn {
  border-collapse: collapse;
  background-color: #062f4f;
  text-align: left;
  vertical-align: top;  
}


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {


    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;  for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    td { 
        /* Behave  like a "row" */
        border-collapse: collapse;
        position: relative;
                width: 100%;
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;           
        white-space: nowrap;
    }
}

#OurWorkBody1 {
  border-collapse: collapse;
  margin: 0;
}

#OurWorkBody2 {
  border-collapse: collapse;
  margin: 0;
}

#OurWorkBody3 {
  border-collapse: collapse;
  margin: 0;
}

table td.TrainingRow1 {
  border-collapse: collapse;
  background: linear-gradient(rgba(152, 75, 67, 0.9), rgba(152, 75, 67, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.TrainingRow3 {
  border-collapse: collapse;
 background: linear-gradient(rgba(152, 75, 67, 0.9), rgba(152, 75, 67, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.Training2Row2 {
  border-collapse: collapse;
  background: linear-gradient(rgba(184, 38, 1, 0.9), rgba(184, 38, 1, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.ToolsRow1 {
  border-collapse: collapse;
  background: linear-gradient(rgba(26, 41, 48, 0.9), rgba(26, 41, 48, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.Tools2Row3 {
  border-collapse: collapse;
  background: linear-gradient(rgba(73, 39, 74, 0.9), rgba(73, 39, 74, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.CasesRow2 {
  border-collapse: collapse;
  background: linear-gradient(rgba(1, 82, 73, 0.9), rgba(1, 82, 73, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

table td.Cases2Row2 {
  border-collapse: collapse;
  background: linear-gradient(rgba(6, 47, 79, 0.9), rgba(6, 47, 79, 0.9));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  text-align: left;
  vertical-align: top;
}

.Footer {
  margin: 0
}

.Footer a {
  color: #FC4A1A;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
}

.Footer p {
  font-size: 14px; 
  padding: 2px; 
  color: #062f4f;
}

.Footer h5 {
  font-size: 22px; 
  padding: 2px; 
  color: #062f4f;
}

#FooterTable {
  width: 100%;
  height: 25vh;
  border-collapse: collapse;
  margin: 0;
}

table, td#Footer {
  border-collapse: collapse;
  background-color: #ffffff;
  text-align: left;
  vertical-align: top;
  padding: 5px;

}

.button {
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  background: #FC4A1A;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin: auto;
  display: inline-block;
}

.button:hover {
  background: #062f4f;
  text-decoration: none;
}

</style>
</head>
<body>
<div class="OurWorkHeader">
  <div id="OurWork1">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
  </div>
    <div class=OurWork1-layer>
        <h1><center>Our Work</center></h1>
        <br>
        <p style="text-align: center; padding:0px 100px;">Check out the many offerings through our dedicated team of innovative experts.
          <br>
          <br>

        </p>
    <button type="button" class="btn btn-default btn-lg filter" id="TrainingRow1">Training</button>
    <button type="button" class="btn btn-default btn-lg filter" id="ToolsRow1">Tools</button>
    <button type=".button" class="btn btn-default btn-lg filter" id="CasesRow2">Use Cases</button>
    <button type=".button" class="btn btn-default btn-lg filter" id="*">Show All</button>
        </div>
        <br>
        <br>
    </div>
</div>

<div>
  <table class="OurWorkBody1" width: "100%">
    <tr>
      <td class="TrainingRow1" width="66.5%">
          <h2>Training</h2>
          <h1>Training Example</h1>
          <p>Something about...</p>
      </td>
      <td class="ToolsRow1" width="33.5%">
        <h2>Tools</h2>
        <h1>Tools Example</h1>
        <p>Something about ...</p>
      </td>
    </tr>
  </table>

  <table class="OurWorkBody2" width: "100%">
    <tr>
      <td class="CasesRow2" width="33.5%">
        <h2>Use Case</h2>
        <h1>Use Case Example</h1>
        <p>Something about ...</p>
      </td>
      <td class="Cases2Row2" width="33%">
        <h2>Use Case</h2>
        <h1>Use Case Example</h1>
        <p>Something about ...</p>
      </td>
      <td class="Training2Row2" width="33.5%">
        <h2>Training</h2>
        <h1>Training Example</h1>
        <p>Something about ...</p> 
      </td>
    </tr>
  </table>

  <table class="OurWorkBody3" width: "100%">
    <tr>
      <td class="TrainingRow3" width="33.5%">
        <h2>Training</h2>
        <h1>Training Example</h1>
        <p>Something about ...</p>
      </td>
      <td class="Tools2Row3" width="66.5%">
        <h2>Tools</h2>
        <h1>Tools Example</h1>
        <p>Something about ...</p>
      </td>
    </tr>
  </table>
</div>

<div class="ChildFooter">
  <table id="ChildFooterRow1" width: "100%">
    <tr>
      <td class="IdeasColumn" width="50%">
        <br><br><br>
        <h4>Send us your ideas</h4>
        <br><br><br>
      </td>
      <td class="CaseStudiesColumn" width="50%">
        <br><br><br>
        <h4>View our case studies</h4>
        <br><br><br>
      </td>
    </tr>
  </table>
</div>


<div class="Footer">
  <table id="FooterTable" width: "100%">
    <tr>
      <td id="Footer" width= "20%"
       <h5>Sign up at </h5><br>
        <p>Have a email address?<br><br> Sign up for and then email us to access all of our resources.</p>
      </td>
      <td id="Footer" width= "20%">
      </td>
      <td id="Footer" width= "20%"
        <h5>Send us your ideas</h5><br>
        <p>If you have a specific challenge for us, fill out this form with all of your details.</p>
      </td>
      <td id="Footer" width= "20%">
      </td>
      <td id="Footer" width= "20%"
        <h5>Get in touch</h5><br>
          <br><br>
       </a>       
      </td>
    </tr>
  </table>
</div>
</body>
</html>

来自JSFiddle的JQuery尝试

jQuery(function ($) {
    var filter;
    $('.filter').click(function () {
        if (filter == this.id) {
            $('td').show();
            filter = undefined;
        } else {
            $('td:not(.' + this.id + ')').hide();
            $('td.' + this.id).show();
            filter = this.id;
        }
    });
});

0 个答案:

没有答案
相关问题
最新问题