表内のJavaScriptを編集する方法

テーブルはWEB開発でよく使われる要素の1つで、データの表示やページのレイアウトなどに使用されます。テーブル関連の JavaScript 操作も、開発者に必要なスキルの 1 つです。この記事では、テーブルのJavaScript操作を編集する方法を詳しく紹介します。

1. テーブルの基礎知識

HTML では、テーブルは、table、tr、th、td などのタグを使用して実装されます。ここで、table はテーブル全体を表し、tr は行を表します。テーブル内の 、 th はテーブルを表し、 、 td のヘッダー セルはテーブル内のデータ セルを表します。以下は単純なテーブルです:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

この方法で、3 つのデータ列を含むテーブルをページに表示できます。次に、このテーブルを例として、JavaScript を使用してテーブルを編集する方法を示します。

2. テーブル オブジェクトの取得

JavaScript では、ドキュメント オブジェクトの getElementById メソッドまたは getElementsByTagName メソッドを通じてテーブル オブジェクトを取得できます (例:

var table = document.getElementById("tableId"); //通过id获取表格对象
var td = document.getElementsByTagName("td"); //通过标签名获取所有表格单元格对象

Use)テーブルを取得するための getElementById メソッド オブジェクトは、HTML 内の対応するテーブルに id 属性を追加する必要があります (例:

<table id="tableId">
  <!-- 表格内容 -->
</table>

3)。テーブル内の行とセルを取得します

Gettingテーブル内の行とセルを操作することは、テーブルを操作する最も効果的な方法であり、基本的な操作の 1 つです。 table オブジェクトの rows 属性を通じてテーブルのすべての行を取得でき、行オブジェクトの cell 属性を通じて行内のすべてのセルを取得できます。例:

//获取表头行对象
var thead = table.rows[0];
//获取第一行对象
var tr = table.rows[1];
//获取第一行第一列单元格对象
var td = table.rows[1].cells[0];
//获取第二行第三列单元格对象
var td2 = table.rows[2].cells[2];

4. 行とセルの追加

テーブルに行とセルを動的に追加することが必要になることがよくあります。行オブジェクトを返す insertRow メソッドを通じて行を追加でき、オブジェクトの insertCell メソッドを通じてセルを追加できます。例:

//在表格第二个位置插入一行
var newRow = table.insertRow(1);
//在该行第一个位置插入一个单元格
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Jerry';
//在该行第二个位置插入一个单元格
newCell = newRow.insertCell(1);
newCell.innerHTML = 18;
//在该行第三个位置插入一个单元格
newCell = newRow.insertCell(2);
newCell.innerHTML = '男';

このようにして、表の 2 番目の位置に行が挿入され、その行に 3 つのセルが挿入されます。

5. 行とセルの削除

テーブル内の行とセルの削除も一般的な操作です。 row オブジェクトのremoveメソッドを使用して行を削除したり、cellオブジェクトのremoveメソッドを使用してセルを削除したりできます。例:

//获取第三行对象
var row = table.rows[2];
//删除该行
table.deleteRow(row.rowIndex);
//获取第一行第二个单元格对象
var cell = table.rows[0].cells[1];
//删除该单元格
cell.parentNode.removeChild(cell);

6. セルの結合

ページのレイアウトやデータの表示などのために、表内の隣接するセルを結合する必要がある場合があります。 rowSpan プロパティとcolSpan プロパティを使用してセルを結合できます。例:

//合并第一行第一列和第二列单元格
var td1 = table.rows[0].cells[0];
td1.rowSpan = 2;
//删除第二行第一列单元格
table.rows[1].deleteCell(0);

これは、1 行目、1 列目、2 列目のセルを結合し、2 行目、1 列目のセルを削除します。

7. セルの内容を変更する

セルの追加、削除、結合に加えて、セルの内容を変更することも一般的な操作の 1 つです。セル内のテキスト コンテンツは、セル オブジェクトの innerHTML プロパティまたは innerText プロパティを通じて変更できます。例:

//获取第二行第三列单元格对象
var td = table.rows[2].cells[2];
//修改单元格内部文本内容
td.innerHTML = '女';

この時点で、2 行目 3 列目のセルのテキストの内容が「女性」に変更されます。

8. 概要

上記では、テーブル オブジェクトの取得、行とセルの取得、行とセルの追加と削除、セルの結合、セルの変更など、JavaScript によるテーブル編集の一般的な操作を紹介しています。 . グリッドコンテンツなどこれらの操作をマスターすることで、テーブル編集の利便性と柔軟性が向上し、WEB 開発能力も向上します。

以上が表内のJavaScriptを編集する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。