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

HTMLDOMテーブルオブジェクト

HTML DOMテーブルオブジェクトは、HTMLドキュメントの

要素を表します。

テーブルオブジェクトの作成方法を見てみましょう

構文

以下は構文です-

document.createElement(“TABLE”);

プロパティ

テーブルオブジェクトのプロパティは次のとおりです-

要素を返します。要素を返します。
プロパティ 説明
キャプション HTMLドキュメントのテーブルの
要素を返します。
tFoot HTMLドキュメントのテーブルの
tHead HTMLドキュメントのテーブルの

メソッド

テーブルオブジェクトのメソッドは次のとおりです-

要素を生成し、それをテーブルに追加します。要素を生成し、それをテーブルに追加します。要素を削除します。要素を削除します。要素を削除します。要素を生成し、それをテーブルに追加します。
メソッド 説明
createCaption（） 空の
要素を生成し、それをテーブルに追加します。
createTFoot（） 空の
createTHead（） 空の
deleteCaption（） テーブルから最初の
要素を削除します。
deleteRow（） テーブルから
deleteThead（） テーブルから
deleteTFoot（） テーブルから
insertRow（） 空の

例

テーブルオブジェクトの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      text-align: center;
      background-color: #fff;
      color: #0197F6;
   }
   h1 {
      color: #23CE6B;
   }
   .btn {
      background-color: #fff;
      border: 1.5px dashed #0197F6;
      height: 2rem;
      border-radius: 2px;
      width: 60%;
      margin: 2rem auto;
      display: block;
      color: #0197F6;
      outline: none;
      cursor: pointer;
   }
</style>
</head>
<body>
<h1>DOM table Object Demo</h1>
<button onclick="createTable()" class="btn">Create a table object</button>
<script>
   function createTable() {
      var table = document.createElement("TABLE");
      table.innerHTML = `<tr>
      <td>Data 1</td>
      <td>Data 2</td>
      </tr>
      <tr>
      <td>Data 3</td>
      <td>Data 4</td>
      </tr>`;
      table.setAttribute('border', "2");
      table.style.margin = "2rem auto";
      document.body.appendChild(table);
   }
</script>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMテーブルオブジェクト

「テーブルオブジェクトを作成する」をクリックします 」ボタンをクリックして、テーブルオブジェクトを作成します。

HTMLDOMテーブルオブジェクト


  1. HTMLDOMオブジェクトオブジェクト

    HTMLのHTMLDOMオブジェクトオブジェクトは、 を表します 要素。 要素の作成 var objectElement = document.createElement(“OBJECT”) ここでは、「 objectElement 」は次のプロパティを持つことができます- プロパティ 説明 データ objectelementによって使用されているリソースのURLを設定/返します フォーム オブジェクト要素の囲み形式への参照を返します 高さ オブジェクト要素の高さを設定/返します 名前 オブジェクト要素の

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE