修复具有可调整行的响应表顶部的表头

时间：2016-10-14 23:02:36

标签： javascript jquery html css drupal-views

我有一个表格，我希望能够通过检查/取消选中复选框来隐藏列。

我希望将标题固定在表格上方，但无论行数如何，都要进行调整。

＆＃13;
＆＃13; 
$(".views-field-title").addClass("show");

 $(".view-reports .view-header input").change(function() {
   if ($('input.code').is(':checked')) {
     $('.views-field-field-code').addClass("show");
   } else {
     $('.views-field-field-code').removeClass("show");
   };

   if ($('input.type').is(':checked')) {
     $('.views-field-field-posting-type').addClass("show");
   } else {
     $('.views-field-field-posting-type').removeClass("show");
   };

   if ($('input.source').is(':checked')) {
     $('.views-field-field-source').addClass("show");
   } else {
     $('.views-field-field-source').removeClass("show");
   };

   if ($('input.posted').is(':checked')) {
     $('.views-field-field-posted-date').addClass("show");
   } else {
     $('.views-field-field-posted-date').removeClass("show");
   };

   if ($('input.locations').is(':checked')) {
     $('.views-field-field-locale-posting').addClass("show");
   } else {
     $('.views-field-field-locale-posting').removeClass("show");
   };
 });
＆＃13; 
.check-hide .view-content {
     height: 300px;
     overflow: auto;
}

/* CSS for Adjustable rows */

.check-hide .views-field {
  display: none;
}
.view-reports .views-field.show,
.view-reports .views-field.views-field-title {
  display: table-cell;
  padding: 5px 10px;
}
.check-hide.view-reports .view-header {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  min-width: 500px;
  max-width: 80%;
  margin: 0 auto;
  height: 50px;
  display: block;
}
.check-hide.view-reports .view-header > span {
  vertical-align: middle;
  display: inline-block;
  *display: inline;
  color: #cac8c8;
  zoom: 1;
  margin-right: 10px;
}
.check-hide.view-reports .view-header > span > input {
  margin-right: 5px;
}
.view-reports .view-header .stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

/* CSS for table */

table, td, th {
    border: 1px solid #ddd;
    text-align: left;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 15px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-reports check-hide">
  <div class="view-header">
    <span><input type="checkbox" name="code" value="code" class=
      "code" />Code</span>  <span><input type="checkbox" name="type"
      value="type" class="type" />Type</span>  <span><input type=
      "checkbox" name="source" value="source" class=
      "source" />Source</span>  <span><input type="checkbox" name=
      "posted" value="posted" class="posted" />Date Posted</span>
    <span><input type="checkbox" name="locations" value=
      "locations" class="locations" />Locations</span>
  </div>

  <div class="view-content">
    <table class="views-table cols-7">
      <thead>
        <tr>
          <th class="views-field views-field-counter" scope="col">

          </th>

          <th class="views-field views-field-field-code" scope="col">
            Code
          </th>

          <th class="views-field views-field-field-posting-type" scope="col">
            Type
          </th>

          <th class="views-field views-field-field-source" scope="col">
            Source
          </th>

          <th class="views-field views-field-field-posted-date" scope="col">
            Date Posted
          </th>

          <th class="views-field views-field-field-locale-posting" scope="col">
            Locations
          </th>

          <th class="views-field views-field-title show" scope="col">
            Title
          </th>
        </tr>
      </thead>

      <tbody>
        <tr class="odd views-row-first">
          <td class="views-field views-field-counter">1.</td>

          <td class="views-field views-field-field-code">
            6222</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 26,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15157">WEEKEND
              MERCHANDISER</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">2.</td>

          <td class="views-field views-field-field-code">
            6322</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 26,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15156">Cook</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">3.</td>

          <td class="views-field views-field-field-code">
            6513</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 26,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15155">Servers</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">4.</td>

          <td class="views-field views-field-field-code">
            6733</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15153">General
              Maintenance</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">5.</td>

          <td class="views-field views-field-field-code">*</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/website">Website</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 22,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/14289">** Wage Subsidy Info
              Session at AVEC**</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">6.</td>

          <td class="views-field views-field-field-code">
            7271</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15152">Carpenter</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">7.</td>

          <td class="views-field views-field-field-code">*</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/website">Website</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 22,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/14751">**Self-Employment Info
              Session at AVEC**</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">8.</td>

          <td class="views-field views-field-field-code">
            4032</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/website">Website</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/1481534">Grade 5 Classroom
              Teacher</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">9.</td>

          <td class="views-field views-field-field-code">
            5124</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/workbc">WorkBC</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/336867">Communications and
              Engagement Specialist</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">10.</td>

          <td class="views-field views-field-field-code">
            1511</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/other">Other</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15149">Post Office Assistant -
              Term</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">11.</td>

          <td class="views-field views-field-field-code">
            4412</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/2">Tofino</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15148">Housekeeper</a>
          </td>
        </tr>

        <tr class="even">
          <td class="views-field views-field-counter">12.</td>

          <td class="views-field views-field-field-code">
            6314</td>

          <td class="views-field views-field-field-posting-type">
            Link</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/website">Website</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/52582">Customer
              Representative</a>
          </td>
        </tr>

        <tr class="odd">
          <td class="views-field views-field-counter">13.</td>

          <td class="views-field views-field-field-code">
            1111</td>

          <td class="views-field views-field-field-posting-type">
            Detailed</td>

          <td class="views-field views-field-field-source">
            <a href="/posting-source/employer">Employer</a>
          </td>

          <td class="views-field views-field-field-posted-date">
            <span class="date-display-single">Sep 23,
              2016</span>
          </td>

          <td class="views-field views-field-field-locale-posting">
            <a href="/taxonomy/term/1">Port Alberni</a>
          </td>

          <td class="views-field views-field-title show">
            <a href="/job-posting/15146">Assistant
              Accountant</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

我最初尝试过像Flytrap这样的this，但它并不适合我...以下是例子：JS Fiddle。

0 个答案:

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