Question

我正在尝试找到一种轻松翻转（转置，旋转）HTML表格的方法，包括将属性移动到标记。根据{{3}}我只能使用边框，背景，宽度和可见性......这仍然有效吗？那么我在表行上的类名和事件处理程序呢？

还有可拖动的列（使用jQuery-UI）。翻转后我是否需要重新初始化？

是否有任何jQuery-UI插件可以处理所有内容？

Answer 1

在我看来，好像这stack overflow question可能会刮伤同样的痒。

以下是该问题的答案中提到的js小提琴：http://jsfiddle.net/CsgK9/2/ - 我没有写这个，这归功于：svinto

将该jsfiddle的内容复制到此代码段。

希望这有帮助。

＆＃13;

$("a").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    
    return false;
});

＆＃13;

td { padding:5px; border:1px solid #ccc;}
.red { color: red; }
.border td { border: 1px solid black; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td class="red">1</td>
        <td class="red">4</td>
        <td class="red">7</td>
    </tr>
    <tr class="border">
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>
</table>


<p><a href="#">Do it.</a></p>

＆＃13;

请注意，放在<tr>上的类会被取消。所以这个答案还有改进的余地。

这种方法可能更接近您正在寻找的方法 - 这是另一种值得一提的方法。积分转到Stefan Kendall

＆＃13;

function swap( cells, x, y ){
   if( x != y ){     
 
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('table').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}

＆＃13;

.red { color: red; }
.border { border: 2px solid black; }
.blue { color: blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
           <td class="red">01</td><td class="red">02</td><td class="red">03</td><td>04</td> 
        </tr> 
        <tr class="blue">
           <td class="border">05</td><td class="border">06</td><td class="border">07</td><td class="border">08</td>
        </tr>
         <tr>
           <td>09</td><td>10</td><td>11</td><td>12</td>
        </tr>  
        <tr>
            <td>13</td><td>14</td><td>15</td><td>16</td>
        </tr>
    </tbody>
</table>

＆＃13;

在这两个示例中，只要您将css类保留在<td>上，它就会毫无问题地移动。我注意到<tr>正在失去他们的属性。通过一些小的修改，我很确定你也可以移动它们。

希望这能让你更接近目标。

css和html列 - 翻转表

1 个答案: