JavaScript是一種廣泛應用于網頁開發的編程語言，其靈活性和易學性深受開發者的喜歡。在網頁開發中，經常會遇到需要調整頁面布局的情況。本文將介紹如何使用JavaScript將頁面中的兩個表格交換位置。

首先，我們需要了解如何獲取頁面中的表格元素。在JavaScript中，我們可以使用getElementById函數來獲得指定id的元素。例如，我們有兩個表格元素分別為table1和table2，他們的HTML代碼如下：

<table id="table1">
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
<table id="table2">
<tr>
<th>標題3</th>
<th>標題4</th>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>

使用JavaScript的getElementById函數，可以將以上兩個表格元素獲取到JavaScript中：

var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");

接下來，我們需要使用JavaScript的insertBefore函數將其中一個表格元素插入到另一個表格元素之前。insertBefore函數可以將一個新的元素插入到指定元素的前面，例如，我們要將table1插入到table2之前，可以使用以下代碼：

table2.parentNode.insertBefore(table1, table2);

以上代碼中，table2.parentNode可以獲取到table2的父元素，即包含table2的元素。使用insertBefore函數將table1插入到table2所在元素之前，即相當于將table1與table2交換位置。

最終結果如下：

<table id="table2">
<tr>
<th>標題3</th>
<th>標題4</th>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
<table id="table1">
<tr>
<th>標題1</th>
<th>標題2</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>

通過以上代碼，我們成功將頁面中的兩個表格交換了位置，實現了完美的頁面布局效果。