今天我們來(lái)講一下javascript表格列拖拉的使用方法。很多時(shí)候，我們需要在網(wǎng)頁(yè)中展示大量的數(shù)據(jù)，而表格可以是我們常用的展示方式之一。但是，有時(shí)候我們需要對(duì)表格進(jìn)行一些調(diào)整，比如改變列的順序、隱藏某些列等等。這時(shí)候，javascript就可以派上用場(chǎng)了。

首先，我們需要明確一個(gè)概念——表格中的每一列都是由元素定義的，所以我們需要通過拖拉元素來(lái)實(shí)現(xiàn)列的調(diào)整。下面是一個(gè)簡(jiǎn)單的表格示例：

<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>

現(xiàn)在，我們想要實(shí)現(xiàn)列的拖拉調(diào)整，我們可以使用jquery-ui中的sortable組件來(lái)實(shí)現(xiàn)。具體實(shí)現(xiàn)代碼如下：

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

首先，我們?cè)诒砀竦?thead>標(biāo)簽下定義了一個(gè)拖拉區(qū)域，然后通過jquery的sortable方法將這個(gè)區(qū)域初始化為可拖拉對(duì)象。其中，axis屬性定義了可拖拉的方向，這里為水平方向，containment屬性定義了拖拉區(qū)域的邊界，這里為父元素，cursor屬性定義了鼠標(biāo)移動(dòng)時(shí)的樣式，tolerance屬性定義了鼠標(biāo)指針?biāo)谖恢玫呐卸ǚ绞剑@里為鼠標(biāo)指針在元素中間，helper屬性定義了拖拉時(shí)的幫助元素，這里為原始元素的復(fù)制品，stop屬性定義了拖拉結(jié)束時(shí)的回調(diào)函數(shù)，這里只是將幫助元素刪除。

需要注意的是，在實(shí)現(xiàn)拖拉效果時(shí)，我們定義了一個(gè)dragging類來(lái)為被拖動(dòng)的列添加樣式，這樣可以在拖動(dòng)時(shí)使它們看起來(lái)更加明顯。

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

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

首先，我們?cè)陧?yè)面上定義了兩個(gè)按鈕（id為"showAge"和"idAge"），通過jquery的click方法分別為它們綁定了show和hide事件。在事件函數(shù)中，我們通過選擇器選取了表格中第二列的所有和元素，并調(diào)用了它們的show和hide方法，來(lái)實(shí)現(xiàn)這些列的顯隱。

綜上所述，javascript表格列拖拉是一種非常實(shí)用的技術(shù)，它可以讓我們更加方便地對(duì)表格進(jìn)行調(diào)整，提高網(wǎng)頁(yè)的用戶體驗(yàn)。如果你想在自己的網(wǎng)頁(yè)中添加這一功能，不妨一試。