Question

我有下表，如下所示：

<thead>        
    <tr class="footable-pagesize">
        <th align="left">Show</th>
        <th>
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>            
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>

现在您可以看到有2个tr标签。第一个tr有4个th。

现在，我要将此第一个tr替换为2个单独的tr，并在特定设备宽度的每行（tr）中使用2个th，例如：576px。

我的意思是这个输出

<thead>        
    <tr class="footable-pagesize">
        <th align="left">Show</th>
        <th>
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>  
    </tr>
    <tr>          
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>

如何使用jQuery或Javascript执行此操作？

感谢您的帮助！

Answer 1

$(document).ready(function(){        
    var x = $(window).width(); //You will get device width here..
    var y = $(window).height();//You will get device height here..
    
    // you can remove or append or show/hide your tr according to width
    if(x > 576)
    {
      $('#tr1').css("display", "block");
      $('#tr2').css("display", "none");
      $('#tr3').css("display", "none");      
    }
    else
    {
      $('#tr1').css("display", "none");
      $('#tr2').css("display", "block");
      $('#tr3').css("display", "block");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblTransaction">
<thead>        
    <tr class="footable-pagesize" id="tr1" style="display:none;">
        <th align="left">Show</th>
        <th>
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>            
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr class="footable-pagesize" id="tr2" style="display:none;">
        <th align="left">Show</th>
        <th>
            <select id="transaction-per-page" class="float-left">
                <option value="5">50 Per Page</option>
                <option value="10">100 Per Page</option>
                <option value="20">150 Per Page</option>
                <option value="50">200 Per Page</option>
            </select>
        </th>  
    </tr>
    <tr id="tr3"  style="display:none;">          
        <th data-breakpoints="xs" width="">
            <div id="reportrange"  class="primary-icon dateRangePicker" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                <i class="fa fa-calendar"></i>&nbsp;
                <span></span> <i class="fa fa-caret-down"></i>
            </div>
        </th>
        <th data-breakpoints="xs" class="footable-expor-pdf" align="right">
            <a href="" class="primary-icon">  <i class="fas fa-file-pdf fa-2x icon"> </i></a>
            &nbsp;
            <a href="" class="primary-icon">  <i class="fas fa-file-excel fa-2x icon"> </i></a>
        </th>
    </tr>
    <tr>
        <th data-breakpoints="xs">Date</th>
        <th data-breakpoints="xs">Description</th>
        <th>Transaction Id</th>
        <th>Amount</th>
    </tr>
</thead>
</table>

Answer 2

仅为您提供一种可能性，如何仅使用CSS根据视口宽度重新排列th元素：

fiddle

使用jQuery在特定设备宽度后添加tr

2 个答案: