更改表列順序

我需要動態改變html/js表中列的順序，你可以告訴我該怎麼做？謝謝大家！更改表列順序

2011-03-28 Frayx

改變列是艱難的，不斷變化的行很容易 – 2011-03-28 19:47:24

使用表格插件。 http://plugins.jquery.com/projects/plugins/tables – 2011-03-28 19:48:14

你應該在這裏提供更多細節。你是否希望允許用戶拖放列的順序？你需要這種靈活性有多大？ – jessegavin 2011-03-28 19:48:34

如果你只需要簡單地移動列，沒有任何花哨的拖放動畫，下面的JS應該做的伎倆：

<script type="text/javascript"> 
    $(function() { 
     jQuery.each($("table tr"), function() { 
      $(this).children(":eq(1)").after($(this).children(":eq(0)")); 
     }); 
    }); 
</script>

根據需要更換號碼。這個概念的工作原理

看起來，寫這個作爲一個班輪是不可能的。包括選擇器中的td，即使行選擇器似乎在一個單獨的索引上保留了每個td，而忽略了行。

一個jQuery網格插件應該這樣做，否則。雖然我沒有這種插件的經驗。

來源

2011-03-28 20:05:40 Mig

嗯..不要敲這個答案，但爲什麼切換正確的答案？我會爲我提供可重用性的優勢。 – typeof 2011-03-28 20:42:17

這是不壞的，只是要知道，如果有合併單元格（即：rowspan> 1），它將無法工作 – Benja 2011-10-26 03:33:34

我對這個做了一個小改動，而不是在兒童中使用一個選擇器，它更容易連鎖.eq（1）例如。這使得它更容易傳遞參數:) – 2012-04-12 22:18:52

移動列並不難：

您可以使用此功能：

jQuery.moveColumn = function (table, from, to) { 
    var rows = jQuery('tr', table); 
    var cols; 
    rows.each(function() { 
     cols = jQuery(this).children('th, td'); 
     cols.eq(from).detach().insertBefore(cols.eq(to)); 
    }); 
}

然後調用它像這樣：

var tbl = jQuery('table'); 
jQuery.moveColumn(tbl, 2, 0);

因此，通過了解該列的索引，以及您想要放置它的索引（從零開始），您可以移動列，包括列標題。

這裏是工作的jsfiddle：http://jsfiddle.net/Qsys7/1/

來源

2011-03-28 20:06:24 typeof

作爲其他解決方案，可能已經足夠，但它不適用於合併的單元格（即rowspan> 1） – Benja 2011-10-26 03:34:40

試過了，當我嘗試做tbl時不起作用， 0,6（將第一列移到最後一位）。相反，我不得不做1,0 => 2,1 => 3,2 ... 6,5將第一列放在lastp花邊 – WizLiz 2014-11-13 08:27:00

修改代碼以允許將列移動到最後一列。請參閱：http://jsfiddle.net/fyq9em36/ – Keeper 2015-11-06 14:19:29

這裏是一個jQuery插件，我剛寫來切換兩列的內容：

$.fn.switchColumns = function (col1, col2) { 
    var $this = this, 
     $tr = $this.find('tr'); 

    $tr.each(function(i, ele){ 
     var $ele = $(ele), 
      $td = $ele.find('td'), 
      $tdt; 

     $tdt = $td.eq(col1).clone(); 
     $td.eq(col1).html($td.eq(col2).html()); 
     $td.eq(col2).html($tdt.html()); 
    }); 
};

See example →

來源

2011-03-28 20:07:10 mVChr

試過這個，它實際上只切換單元格的內容而不是列本身。如果你有td元素對它們中包含的內容很重要，這是行不通的。如果你沒有這些要求，概念就起作用了。 – 2012-04-12 22:17:27

如果列上有'width'屬性或其他樣式屬性，則移動列的內容並不那麼聰明。你只是結束了寬列更窄，反之亦然。 – cartbeforehorse 2014-07-02 22:26:07

更改表列順序

回答

相關問題