Question

我有一张如下表格，我正在尝试复杂的事情，我需要弄清楚如何只在桌面设备上显示＆＃34; Hi＆＃34;。或者换句话说，将其隐藏在移动设备中。

我想要保留一些onClick函数。适用于桌面和移动设备。

非常感谢！

      <div class="col-sm-9 noPadding">
        <div class="table-responsive">
          <table  id="table2" class="table table-bordered">
            <thead>
              <tr>
                <th class="col-xs-2">#</th>
                <th class="col-xs-2">Monday</th>
                <th class="col-xs-2">Tuesday</th>
                <th class="col-xs-2">Wednesday</th>
                <th class="col-xs-2">Thursday</th>
                <th class="col-xs-2">Friday</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="">09-10</td>
                <td class="" onclick="highlightUsers(0,0)">Hi</td>
                <td class="" onclick="highlightUsers(1,0)">Hi</td>
                <td class="" onclick="highlightUsers(2,0)">Hi</td>
                <td class="" onclick="highlightUsers(3,0)">Hi</td>
                <td class="" onclick="highlightUsers(4,0)">Hi</td>
              </tr>
              <tr>
                <td class="">10-11</td>
                <td class="" onclick="highlightUsers(0,1)">Hi</td>
                <td class="" onclick="highlightUsers(1,1)">Hi</td>
                <td class="" onclick="highlightUsers(2,1)">Hi</td>
                <td class="" onclick="highlightUsers(3,1)">Hi</td>
                <td class="" onclick="highlightUsers(4,1)">Hi</td>
              </tr>
              <tr>
                <td class="">11-12</td>
                <td class="" onclick="highlightUsers(0,2)">Hi</td>
                <td class="" onclick="highlightUsers(1,2)">Hi</td>
                <td class="" onclick="highlightUsers(2,2)">Hi</td>
                <td class="" onclick="highlightUsers(3,2)">Hi</td>
                <td class="" onclick="highlightUsers(4,2)">Hi</td>
              </tr>
              <tr>
                <td class="">12-01</td>
                <td class="" onclick="highlightUsers(0,3)">Hi</td>
                <td class="" onclick="highlightUsers(1,3)">Hi</td>
                <td class="" onclick="highlightUsers(2,3)">Hi</td>
                <td class="" onclick="highlightUsers(3,3)">Hi</td>
                <td class="" onclick="highlightUsers(4,3)">Hi</td>
              </tr>
              <tr>
                <td class="">01-02</td>
                <td class="" onclick="highlightUsers(0,4)">Hi</td>
                <td class="" onclick="highlightUsers(1,4)">Hi</td>
                <td class="" onclick="highlightUsers(2,4)">Hi</td>
                <td class="" onclick="highlightUsers(3,4)">Hi</td>
                <td class="" onclick="highlightUsers(4,4)">Hi</td>
              </tr>
              <tr>
                <td class="">02-03</td>
                <td class="" onclick="highlightUsers(0,5)">Hi</td>
                <td class="" onclick="highlightUsers(1,5)">Hi</td>
                <td class="" onclick="highlightUsers(2,5)">Hi</td>
                <td class="" onclick="highlightUsers(3,5)">Hi</td>
                <td class="" onclick="highlightUsers(4,5)">Hi</td>
              </tr>
              <tr>
                <td class="">03-04</td>
                <td class="" onclick="highlightUsers(0,6)">Hi</td>
                <td class="" onclick="highlightUsers(1,6)">Hi</td>
                <td class="" onclick="highlightUsers(2,6)">Hi</td>
                <td class="" onclick="highlightUsers(3,6)">Hi</td>
                <td class="" onclick="highlightUsers(4,6)">Hi</td>
              </tr>
              <tr>
                <td class="">04-05</td>
                <td class="" onclick="highlightUsers(0,7)">Hi</td>
                <td class="" onclick="highlightUsers(1,7)">Hi</td>
                <td class="" onclick="highlightUsers(2,7)">Hi</td>
                <td class="" onclick="highlightUsers(3,7)">Hi</td>
                <td class="" onclick="highlightUsers(4,7)">Hi</td>
              </tr>
              <tr>
                <td class="">05-06</td>
                <td class="" onclick="highlightUsers(0,8)">Hi</td>
                <td class="" onclick="highlightUsers(1,8)">Hi</td>
                <td class="" onclick="highlightUsers(2,8)">Hi</td>
                <td class="" onclick="highlightUsers(3,8)">Hi</td>
                <td class="" onclick="highlightUsers(4,8)">Hi</td>
              </tr>
              <tr>
                <td class="">06-07</td>
                <td class="" onclick="highlightUsers(0,9)">Hi</td>
                <td class="" onclick="highlightUsers(1,9)">Hi</td>
                <td class="" onclick="highlightUsers(2,9)">Hi</td>
                <td class="" onclick="highlightUsers(3,9)">Hi</td>
                <td class="" onclick="highlightUsers(4,9)">Hi</td>
              </tr>
              <tr>
                <td class="">07-08</td>
                <td class="" onclick="highlightUsers(0,10)">Hi</td>
                <td class="" onclick="highlightUsers(1,10)">Hi</td>
                <td class="" onclick="highlightUsers(2,10)">Hi</td>
                <td class="" onclick="highlightUsers(3,10)">Hi</td>
                <td class="" onclick="highlightUsers(4,10)">Hi</td>
              </tr>
            </tbody>
          </table>
        </div><!-- table-responsive" -->
      </div><!-- col-sm-9 -->

Answer 1

由于您使用的是Bootstrap，因此可以使用类hidden-xs来隐藏移动设备中的元素。示例如下：

<tr>
    <td class="">09-10</td>
    <td class="hidden-xs" onclick="highlightUsers(0,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(1,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(2,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(3,0)">Hi</td>
    <td class="hidden-xs" onclick="highlightUsers(4,0)">Hi</td>
</tr>

但这会使您的onclick事件无效，因为它不会显示。

如果您希望将onclick事件保留在td上，请将td的{{1}}设置为visibility，设置宽度为{hidden的设备1}}。通过这些元素将被隐藏而不会丢失区域和<768px监听器。

Answer 2

您可以使用以下 media query 按屏幕尺寸定位设备。使用max-device-width可以控制哪些设备可以查看内容，并且可以使用onclick属性（或其他属性）来定位要隐藏的元素。

@media screen and (max-device-width: 1200px) { 
    td[onclick^="highlightUsers"] {
      visibility: hidden;
    }
}

如何仅在桌面上显示表格内容？

2 个答案: