jquery將表格行轉列-前端問答-PHP中文網

jquery將表格行轉列

PHPz

發布： 2023-05-28 12:48:38

原創

467 人瀏覽過

在前端開發中，常會涉及到表格資料的處理和展示。有時我們需要將表格行轉列以達到更好的展示效果或資料處理需求。 jQuery是一個輕量級的JavaScript函式庫，它提供了方便的DOM操作和事件處理方法，讓這種表格資料轉換作業變得簡單易行。本文將介紹如何使用jQuery將表格行轉列。

為什麼需要將表格行轉列

在實際開發中，有時候我們需要將表格資料進行更細緻的展示和處理。例如，在某個表格中，一行代表一個產品，每一列表示該產品的屬性，如果我們想要根據屬性將所有產品分類展示或進行比較，此時我們需要將表格行轉列。轉換後的表格可以更清楚地顯示產品屬性或屬性之間的差異，方便使用者或開發者進行資料處理和分析。

實作表格行轉列的想法

想要實作表格行轉列，我們需要透過JavaScript/jQuery讀取表格中的資料並組裝成新的表格。具體實現想法如下：

首先，我們需要讀取表格中所有數據，並理解表格數據的結構和每一列的含義。
將資料處理，提取行標題、列標題、資料。
組裝新的表格結構，並將處理後的資料加入其中。

jQuery將表格行轉列的實作步驟

現在，讓我們來一步一步實現表格行轉列的操作。

準備一個需要進行表格行轉列的表格結構。例如：

<table id="original">
  <tr>
    <th></th>
    <th>产品A</th>
    <th>产品B</th>
    <th>产品C</th>
  </tr>
  <tr>
    <td>颜色</td>
    <td>红色</td>
    <td>蓝色</td>
    <td>绿色</td>
  </tr>
  <tr>
    <td>尺寸</td>
    <td>大号</td>
    <td>中号</td>
    <td>小号</td>
  </tr>
  <tr>
    <td>售价</td>
    <td>100</td>
    <td>200</td>
    <td>150</td>
  </tr>
</table>

登入後複製

透過以下的jQuery程式碼，讀取原始表格的資料並儲存在陣列中：

var rows = $('#original tr');
var data = [];

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  var rowData = [];

  for (var j = 1; j < row.cells.length; j++) {
    rowData.push(row.cells[j].innerText);
  }

  data.push(rowData);
}

登入後複製

接下來，我們將行標題、列標題以及資料分別儲存在三個不同的陣列中：

var rowHeaders = [];
var colHeaders = [];
var values = [];

for (var i = 0; i < data.length; i++) {
  rowHeaders.push(rows[i + 1].cells[0].innerText);
}

for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  for (var j = 1; j < row.cells.length; j++) {
    if (i === 1) {
      colHeaders.push(row.cells[j].innerText);
    }
    if (!values[j - 1]) {
      values[j - 1] = [];
    }
    values[j - 1].push(row.cells[j].innerText);
  }
}

登入後複製

此時，我們已經成功將資料按行、列和數值分別儲存在不同的陣列中。接下來，我們需要透過這些陣列來建立新的表格結構。

建立新的表格結構並插入到HTML文件中：

var newTable = $('<table>');
var headerRow = $('<tr>');
headerRow.append($('<th>').text(''));

for (var i = 0; i < colHeaders.length; i++) {
  headerRow.append($('<th>').text(colHeaders[i]));
}

newTable.append(headerRow);

for (var i = 0; i < rowHeaders.length; i++) {
  var row = $('<tr>');
  row.append($('<td>').text(rowHeaders[i]));

  for (var j = 0; j < values.length; j++) {
    row.append($('<td>').text(values[j][i]));
  }

  newTable.append(row);
}

$('#original').after(newTable);

登入後複製