今天我們來講一下javascript表格列拖拉的使用方法。很多時候，我們需要在網頁中展示大量的數據，而表格可以是我們常用的展示方式之一。但是，有時候我們需要對表格進行一些調整，比如改變列的順序、隱藏某些列等等。這時候，javascript就可以派上用場了。

首先，我們需要明確一個概念——表格中的每一列都是由元素定義的，所以我們需要通過拖拉元素來實現列的調整。下面是一個簡單的表格示例：

<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>john@example.com</td>
<td>555-1234</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>25</td>
<td>jane@example.com</td>
<td>555-4321</td>
</tr>
</tbody>
</table>

現在，我們想要實現列的拖拉調整，我們可以使用jquery-ui中的sortable組件來實現。具體實現代碼如下：

$(function() {
$("table thead tr").sortable({
axis: "x",
containment: "parent",
cursor: "move",
tolerance: "pointer",
helper: function(e, el) {
var original = el.clone();
el.addClass("dragging");
return original;
},
stop: function(e, el) {
el.item.removeClass("dragging");
}
}).disableSelection();
});

首先，我們在表格的標簽下定義了一個拖拉區域，然后通過jquery的sortable方法將這個區域初始化為可拖拉對象。其中，axis屬性定義了可拖拉的方向，這里為水平方向，containment屬性定義了拖拉區域的邊界，這里為父元素，cursor屬性定義了鼠標移動時的樣式，tolerance屬性定義了鼠標指針所在位置的判定方式，這里為鼠標指針在元素中間，helper屬性定義了拖拉時的幫助元素，這里為原始元素的復制品，stop屬性定義了拖拉結束時的回調函數，這里只是將幫助元素刪除。

需要注意的是，在實現拖拉效果時，我們定義了一個dragging類來為被拖動的列添加樣式，這樣可以在拖動時使它們看起來更加明顯。

除了拖拉，我們還可以通過jquery的show和hide方法來控制某些列的顯隱。下面是一個示例：

$("#showAge").click(function() {
$("table td:nth-child(2), table th:nth-child(2)").show();
});
$("#hideAge").click(function() {
$("table td:nth-child(2), table th:nth-child(2)").hide();
});

首先，我們在頁面上定義了兩個按鈕（id為"showAge"和"idAge"），通過jquery的click方法分別為它們綁定了show和hide事件。在事件函數中，我們通過選擇器選取了表格中第二列的所有和元素，并調用了它們的show和hide方法，來實現這些列的顯隱。

綜上所述，javascript表格列拖拉是一種非常實用的技術，它可以讓我們更加方便地對表格進行調整，提高網頁的用戶體驗。如果你想在自己的網頁中添加這一功能，不妨一試。