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

JavaScriptでHTMLテーブルの全要素にIF条件を適用する方法

HTMLテーブル内のすべての要素にIF条件（条件分岐）を適用したい場合は、document.querySelectorAll()とforEach()を組み合わせることで簡単に実現できます。querySelectorAll()で対象の要素をまとめて取得し、forEach()で1つずつループ処理を行いながら、各要素に対して条件判定を実行します。

サンプルコード

以下がそのコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<body>
   <table>
      <tr>
         <td class="demo"> Java </td>
      </tr>
      <tr>
         <td class="demo"> MySQL </td>
      </tr>
      <tr>
      </tr>
   </table>
</body>
<script>
   document.querySelectorAll(".demo").forEach(function (obj) {
      if (obj.innerText.trim() === "MySQL") {
         obj.innerText = "Javascript";
      }
      if (obj.innerText.trim() === "MongoDB") {
         obj.innerText = "Python";
      }
   });
</script>
</html>

コードの解説

  • document.querySelectorAll(".demo")：class属性が「demo」であるすべてのtd要素を取得します。
  • forEach()：取得した各要素に対して、順番に関数を実行するループ処理です。
  • innerText.trim()：要素内のテキストから前後の余分な空白を取り除いてから比較することで、正確な条件判定を可能にしています。
  • if文による書き換え：テキストが「MySQL」と一致すれば「Javascript」へ、「MongoDB」と一致すれば「Python」へと内容を置き換えます。

実行方法

上記のプログラムを実行するには、ファイルを「index.html」などの任意の名前で保存してください。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択するとブラウザで表示できます。

出力結果

このコードを実行すると、次のような出力が得られます。テーブル内の「MySQL」というセルが「Javascript」に自動的に書き換えられていることが確認できます。

JavaScriptでHTMLテーブルの全要素にIF条件を適用する方法

  1. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド

  2. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in