Question

我有这样的表：

<table>
   <thead>
      <tr>
         <th></th>
         <th>Col1</th>
         <th>Col2</th>
         <th>Col3</th>
         <th>Col4</th>
         <th>Col5</th>
      </tr>
   </thead>
   <tbody>
   <tr>
       <td class="control"></td>
       <td>AA</td>
       <td>BB</td>
       <td>CC</td>
       <td>DD</td>
       <td>EE</td>
   </tr>
   ...
</table>

适当页面调整大小我想将该表更改为下面的表格设计。此更改应仅应用于奇数行，因为隐藏了偶数行，并且当我单击具有控件类的第一个td时，它会显示。

<table>
    <tr>
       <td rowspan="6" class="control"></td>
    </tr>
    <tr>
       <td>Col1</td>
       <td>AA</td>
    </tr>
    <tr>
       <td>Col2</td>
       <td>BB</td>
    </tr>
   <tr>
       <td>Col3</td>
       <td>CC</td>
    </tr>
<tr>
       <td>Col4</td>
       <td>DD</td>
    </tr>
    <tr>
       <td>Col5</td>
       <td>EE</td>
    </tr>
   ...

点击此链接https://jsfiddle.net/pmtgqmsa/2/

Answer 1

您可以使用弹性框来完成这种任务。

flex-box能够将内容的当前流量从一行更改为列。只需将flex-flow: column;更改为flex-flow: row;

即可

以下是fiddle

您可以在css-tricks中了解有关flex-box的更多信息。

因为它现在是div，所以你也不会遇到行/ col跨度问题。您可以自由调整高度和宽度。

Answer 2

最后，我已多次尝试，然后我得到了答案

$('#myTable > thead > tr').css('display', 'none');
    $('#myTable tr.parent').each(function () {
        var _html = "";
        var _newRow = "";
        var header = Array();
        $("#myTable  tr th").each(function (i) {
            header[i] = $(this).text();
        });
        $(this).find('td').each(function (i) {                
                if (i == 0) {
                    _html += "<td rowspan='6'>" + $(this).html() + "</td>";
                }
                else {
                    _newRow += "<tr> <td> " + header[i] + " :</td> <td>" + $(this).html() + "</td> </tr>";
                }
        })
        $(this).html("");
        $(this).html(_html);
        $(_newRow).insertAfter($(this).closest("tr"));            
    })

我希望我的回答可以帮助任何寻找类似代码的人

将html表中的第一个td重新设计为rowspan

2 个答案: