JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【jQuery】HTMLテーブルのデータをJavaScriptの配列に変換する方法

HTMLテーブルのデータを配列に変換するとは

Webアプリケーションを開発していると、HTMLテーブルとして表示されているデータを、JavaScript側で配列として扱いたい場面があります。そんなときは、jQueryのfind()メソッドで<td>要素のデータを取得し、push()メソッドで配列に格納することで、簡単に実現できます。

サンプルとなるHTMLテーブル

今回は、以下のような「名前（Name）」と「年齢（Age）」を持つシンプルなテーブルを例に説明します。

<table id="details">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>John</td><td>23</td></tr>
<tr><td>David</td><td>26</td></tr>
</tbody>
</table>

テーブルを配列に変換する完全なコード

次に、<td>要素からデータを取得して配列に格納する、完全なサンプルコードを見てみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
    .notShown {
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<table id="details">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>John</td><td>23</td></tr>
<tr><td>David</td><td>26</td></tr>
</tbody>
</table>
<script>
    var convertedIntoArray = [];
    $("table#details tr").each(function() {
        var rowDataArray = [];
        var actualData = $(this).find('td');
        if (actualData.length > 0) {
            actualData.each(function() {
                rowDataArray.push($(this).text());
            });
            convertedIntoArray.push(rowDataArray);
        }
    });
    console.log(convertedIntoArray);
</script>
</body>
</html>

コードのポイント解説

  • $("table#details tr")：idが「details」のテーブル内にあるすべての行（tr要素）を取得します。
  • $(this).find('td')：各行からtd要素だけを抽出します。これにより、th要素を含むヘッダー行は自動的に対象外になります。
  • actualData.length > 0：td要素が1つも含まれない行（ヘッダー行など）はスキップされるため、データ行だけが処理されます。
  • push()：各セルのテキストを「rowDataArray」に行単位で追加し、さらにその配列を「convertedIntoArray」に格納していきます。結果として二次元配列が完成します。

プログラムの実行方法

上記のコードを「index.html」というファイル名で保存してください。VS Codeをお使いの場合は、ファイルを右クリックして「Open with Live Server」を選択すると、ブラウザ上で簡単に実行できます。

実行結果

ブラウザのデベロッパーツールでコンソールを開くと、テーブルのデータが以下のような二次元配列として出力されていることが確認できます。

[ [ "John", "23" ], [ "David", "26" ] ]
【jQuery】HTMLテーブルのデータをJavaScriptの配列に変換する方法

まとめ

jQueryのeach()・find()・push()を組み合わせれば、HTMLテーブルのデータを簡単にJavaScriptの二次元配列へ変換できます。この手法は、テーブルの内容をJSON形式でサーバーに送信したり、CSVとしてエクスポートしたりする際の中間処理としても幅広く活用できるので、ぜひ覚えておきましょう。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n