Редизайн первый TD в HTML таблице RowSpan

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

Наконец, я пробовал несколько раз, то я получил ответ

$('#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"));    
    }) 

Я надеюсь, что мой ответ поможет, кто ищет подобный код

Answer 2

Вы можете использовать гибкую форму для того, чтобы достичь такого рода задачи.

гибкая коробка, способная изменять текущий поток содержимого из строки в столбец. просто путь изменения flex-flow: column; к flex-flow: row;

Вот fiddle

Вы можете узнать больше о гибких коробках в css-tricks.

Поскольку это div теперь, у вас также не будет проблемы с номером строки/столбца. Вы можете свободно регулировать высоту и ширину.