jqueryはテーブルの行を列に変換します

フロントエンド開発では、テーブル データの処理と表示が頻繁に行われます。表示やデータ処理を改善するために、テーブルの行を列に変換する必要がある場合があります。 jQuery は、便利な DOM 操作およびイベント処理メソッドを提供する軽量の JavaScript ライブラリであり、このテーブル データ変換操作をシンプルかつ簡単にします。この記事では、jQueryを使ってテーブルの行を列に変換する方法を紹介します。

テーブルの行を列に変換する必要がある理由

実際の開発では、テーブル データをより詳細に表示および処理する必要がある場合があります。たとえば、テーブルでは 1 つの行が製品を表し、各列が製品の属性を表します。属性に基づいてすべての製品を分類または比較したい場合は、テーブルの行を列に変換する必要があります。変換されたテーブルでは、製品の属性や属性間の差異をより明確に表示できるため、ユーザーや開発者はデータの処理と分析が容易になります。

テーブルの行を列に変換するアイデア

テーブルの行を列に変換するには、JavaScript/jQuery を通じてテーブル内のデータを読み取り、それを新しいテーブルに組み立てる必要があります。具体的な実装アイデアは次のとおりです。

1. まず、テーブル内のすべてのデータを読み取り、テーブル データの構造と各列の意味を理解する必要があります。
2. データを処理し、行ヘッダー、列ヘッダー、およびデータを抽出します。
3. 新しいテーブル構造を構築し、処理されたデータをそこに追加します。

jQuery でテーブルの行を列に変換する手順

次に、テーブルの行を列に変換する操作を段階的に実装してみましょう。

1. テーブルの行を列に変換する必要があるテーブル構造を準備します。例:

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

2. 次の 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);
}

3. Nextでは、行ヘッダー、列ヘッダー、およびデータを 3 つの異なる配列に保存します:

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

この時点で、行、列、および値ごとに異なる配列にデータを保存することができました。次に、これらの配列から新しいテーブル構造を作成する必要があります。

4. 新しいテーブル構造を作成し、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);

5. 最後に、元のテーブルを削除する必要があります:

$('#original').remove();

この時点で、テーブルの行を列に変換する操作が完了しました。これで、元のテーブルが削除され、変換されたテーブルが HTML ドキュメントに挿入されました。

概要

この記事では、jQuery を使用してテーブルの行を列に変換する方法を紹介します。具体的な実装は、テーブル データを読み取ってデータを処理することにより、新しいテーブル構造を組み立てることです。この操作により、テーブル内のデータをより明確かつ直感的に表示および処理できるようになります。開発者やデータ アナリストにとって、これはデータを迅速に処理し、その意味を分析する上で重要な意味を持ちます。

以上がjqueryはテーブルの行を列に変換しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。