重新设计html表中的第一个TD到行跨

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-box能够将内容的当前流从行更改为列。 只是通过更改flex-flow: column; flex-flow: row;

这是小提琴

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

由于现在是div，因此您也不会遇到行/列跨度问题。 您可以自由调整高度和宽度。

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"));            
    })

希望我的回答对寻找相似代码的人有所帮助