JavaScript でのマスター テーブルの操作とデータ処理

JavaScript でのテーブル操作とデータ処理をマスターするには、特定のコード例が必要です。

Web 開発では、テーブルはデータを表示する方法としてよく使用されます。 JavaScript は、テーブルを操作することで動的なデータの処理や対話を実現できる強力なプログラミング言語です。この記事では、JavaScript を使用して表形式データを操作および処理する方法を紹介し、具体的なコード例を示します。

1. テーブルを作成する

HTML では、table タグを使用して単純なテーブルを作成できます。 JavaScript では、ドキュメント オブジェクトの createElement メソッドを使用して新しいテーブル要素を作成し、それをページに追加できます。

コード例:

// 创建一个table元素
var table = document.createElement("table");

// 设置表格的class属性
table.className = "table";

// 创建表格的头部
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerHTML = "姓名";
var th2 = document.createElement("th");
th2.innerHTML = "年龄";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);

// 创建表格的内容
var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

// 将头部和内容添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中的某个元素中
var container = document.getElementById("container");
container.appendChild(table);

2. テーブル データの読み取り

JavaScript を使用して、テーブル内のデータを読み取り、処理できます。 table 要素の rows 属性を使用してテーブル内の行データを取得し、cells 属性を使用して行内のセル データを取得できます。

コード例:

// 获取表格中的所有行
var rows = table.rows;

// 遍历每一行
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  
  // 获取每一行中的单元格数据
  var name = cells[0].innerHTML;
  var age = cells[1].innerHTML;
  
  // 处理数据...
}

3. テーブルへのデータの追加

JavaScript を使用して、テーブルにデータを動的に追加できます。 table 要素の insertRow メソッドを使用してテーブル内の指定した位置に新しい行を挿入し、insertCell メソッドを使用して行に新しいセルを挿入できます。

コード例:

// 在表格的末尾插入一行
var newRow = table.insertRow(-1);

// 在行中插入单元格
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "张三";
var cell2 = newRow.insertCell(1);
cell2.innerHTML = "20";

4. テーブル データの更新

JavaScript を使用して、テーブル内のデータを更新することもできます。テーブル内のセルの innerHTML 属性を直接変更してデータを更新できます。

コード例:

// 更新表格中的某个单元格数据
var row = table.rows[1];
row.cells[1].innerHTML = "30";

5. テーブルデータの削除

JavaScript を使用して、テーブル内のデータを削除できます。 table 要素の deleteRow メソッドを使用して、テーブル内の行を削除できます。

コード例:

// 删除表格中的某一行
var row = table.rows[1];
table.deleteRow(row.rowIndex);

6. テーブルの並べ替え

JavaScript を使用して、テーブル内のデータを並べ替えることができます。 Array オブジェクトの sort メソッドを使用してデータを並べ替え、テーブルを再レンダリングできます。

コード例:

// 对表格中的数据按年龄进行排序
data.sort(function(a, b) {
  return a.age - b.age;
});

// 清空表格内容
tbody.innerHTML = "";

// 重新渲染表格
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

上記は、テーブル操作とデータ処理に JavaScript を使用する具体的なコード例です。これらのスキルを習得することで、表形式のデータを柔軟に操作および処理し、より豊かなインタラクティブな効果を実現できます。この記事の内容があなたのお役に立てれば幸いです。

以上がJavaScript でのマスター テーブルの操作とデータ処理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。