JavaScriptでメール表示・削除機能を実装_JavaScriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptでメール表示・削除機能を実装_JavaScriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

1. 主な紹介:
この質問では、テーブルの rows 属性に基づいて配列を取得し、その配列にスタイルを設定することで、色が表示される以前のテクノロジーを使用しています。

1) すべてのチェックボックス を選択し、var nodess=document.getElementsByName("mail");

を渡します。

for(var x=0;x<nodess.length;x++){

nodess[x].checked=nodes.checked;

}

チェックボックス機能

2) ボタンはすべてを選択し、選択を反転し、すべての選択を解除します。 は関数で記述でき、

には異なるパラメーター AllBybtn (num) 型を渡すことができます。

関数内ではjsの特性に合わせて非0と0の2つの状態を設定していますが、同期のためには別々に設定する必要があります

3).すべてのチェックボックスが選択されている場合にデフォルトですべてのチェックボックスが選択されていることを表示するには、各チェックボックスを設定し、関数 checkBysingle() を使用して設定する必要があります

4).選択した項目を削除する必要があります。現在のものはチェックボックスオブジェクトです。上位レベルは td--tr-- まず tr オブジェクトを取得し、次に tr を削除します。親ノードからtrを渡すとオブジェクトが削除されるとxが変化し、オブジェクトによっては削除できない場合があるため、Xの値を元に戻すか、後ろから削除する必要があります。

2. スタイル設定:

<style type="text/css"> 
      .one{ 
        background-color:#00ff80; 
      } 
      .two{ 
        background-color:#80ff00; 
      } 
      .three{ 
        background-color:#0000ff; 
      } 
      table th{ 
        background-color:#c0c0c0; 
      } 
      table{ 
        width:400px; 
        border:solid 1px; 
      } 
      table tr{ 
        height:50px; 
      } 
    </style>

3. 背景色とマウス移動イベントの設定

  function toaddcolor(){ 
          //颜色设置， 
          var nodes = document.getElementById("tabid"); 
          var rows1 = nodes.rows; 
          for (var x = 1; x < rows1.length; x++) { 
            if (x % 2 == 0) { 
              rows1[x].className = "one"; 
            } 
            else { 
              rows1[x].className = "two"; 
            } 
          } 
        } 
          function addEvent(){ 
            var name; 
            //当鼠标移上去之后发生相应的变化 
            var nodes=document.getElementById("tabid"); 
            var rows1=nodes.rows; 
            for (var x = 1; x < rows1.length; x++) { 
            rows1[x].onmouseover = function(){ 
              name = this.className; 
              this.className = "three"; 
            } 
            rows1[x].onmouseout = function(){ 
              this.className = name; 
            } 
             
//             alert("bb"); 
//             alert(rows1[x].getElementsByTagName("input")[0].nodeName); 
            rows1[x].getElementsByTagName("input")[0].onclick=function(){//每一行的input对象 
              document.getElementsByName("allItem")[0].indeterminate=true;//让全选的复选框形状发生变化 
            } 
          } 
        } 
        onload=function(){//在网页加载时候调用 
          toaddcolor(); 
          addEvent(); 
        }

4. すべてのチェックボックスをオンにします

function allcheck(nodes){//全选checkbox的点击调用这个 
          var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
          //多个全选的时候，必须和其他的一个一样 
          var nodes1=document.getElementsByName("allItem"); 
          for(var x=0;x<nodes1.length;x++){ 
            nodes1[x].checked=nodes.checked; 
          } 
        }

5. すべてのボタンを選択します

function AllBybtn(num){//全选按钮设置 
          var nodess = document.getElementsByName("mail"); 
          /*多重for 循环不太好，可以根据js里面的特性0  非0 
           for (var x = 0; x < nodess.length; x++) { 
            if (num == 1) { 
              nodess[x].checked = 1; 
            }else if (num == 2) { 
                nodess[x].checked = !nodess[x].checked; 
              }else if (num == 3) { 
                  nodess[x].checked = false; 
                } 
          }*/ 
          for(var x=0;x<nodess.length;x++){ 
            if(num<2){ 
              nodess[x].checked=num; 
                //让全选的复选框可以 单独写个函数 
                var all=document.getElementsByName("allItem"); 
                for(var y=0;y<all.length;y++){ 
                  if(num==1){ 
                  all[y].checked=num; 
                }else{ 
                  all[y].checked=num; 
                } 
              } 
            }else{ 
              nodess[x].checked=!nodess[x].checked; 
              var all=document.getElementsByName("allItem"); 
                for (var y = 0; y < all.length; y++) { 
                  all[y].checked=0; 
                }}}}

6. すべての項目を選択したら、すべてを選択し、自動的に選択します

function checkBysingle(){//全部入选之后，全选的自动选中      
          var flag = true; 
          var node = document.getElementsByName("mail"); 
          for (var x = 0; x < node.length; x++) { 
            if (node[x].checked == false) { 
              flag = false; 
              break; 
            } 
          } 
           
          var all = document.getElementsByName("allItem"); 
          for (var y = 0; y < all.length; y++) { 
            if (flag) { 
              all[y].checked = true; 
            } 
            else { 
              all[y].checked = false; 
            }}}

7. メール削除機能(行削除)

function DelBybtn(){//删除行 
  var tdnode=document.getElementsByName("mail"); 
    /*for(var x=0;x<tdnode.length;x++){ 
    if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
       var trnode=tdnode[x].parentNode.parentNode;//tr对象 
       trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
    // alert("aa"); 
    //节点容器跟Java当中的集合一样，只要是remove()，长度就会变的。这里，需要进行x的复位 
      x--; 
    }*/ 
    for(var x=tdnode.length-1;x>=0;x--){ 
      if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
       var trnode=tdnode[x].parentNode.parentNode;//tr对象 
       trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
    } 
    loading();//调用颜色的设置 
  } 
}

現象 1:

逆転選挙効果:

削除前:

削除後:

完全なコード:

<!DOCTYPE html> 
<html> 
 <head> 
  <!-- 
    这题采用之前的技术，根据table的rows属性，获得数组，然后对数组设置样式，所以颜色就出来了 
    1，全选复选框，通过var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
    复选框函数进行 
    2，按钮全选，反选，和取消全选，可以用一个函数写，传入不同的参数AllBybtn(num）类型即可 
    函数里面 根据js的特性 非0 和 0 这两种状态，进行设置，为了同步，需要分别进行设置 
    3，为了显示出当全部选中就默认全选的复选框选中，所以需要对每一个复选框进行设置，采用函数checkBysingle()进行设置 
    4,删除所选项是需要主要，当前的是checkbox对象，上一级是td--tr--先拿到tr对象，然后对通过tr的父节点删除tr对象 
      再删除之后，x会变化，可能有些删不到，所以需要将X的值还原，或者从后面开始删除 
  --> 
  <title>Mail.html</title> 
    <style type="text/css"> 
      .one{ 
        background-color:#00ff80; 
      } 
      .two{ 
        background-color:#80ff00; 
      } 
      .three{ 
        background-color:#0000ff; 
      } 
      table th{ 
        background-color:#c0c0c0; 
      } 
      table{ 
        width:400px; 
        border:solid 1px; 
      } 
      table tr{ 
        height:50px; 
      } 
    </style> 
    <script type="text/javascript"> 
        var name; 
        function toaddcolor(){ 
          //颜色设置， 
          var nodes = document.getElementById("tabid"); 
          var rows1 = nodes.rows; 
          for (var x = 1; x < rows1.length; x++) { 
            if (x % 2 == 0) { 
              rows1[x].className = "one"; 
            } 
            else { 
              rows1[x].className = "two"; 
            } 
          } 
        } 
          function addEvent(){ 
            var name; 
            //当鼠标移上去之后发生相应的变化 
            var nodes=document.getElementById("tabid"); 
            var rows1=nodes.rows; 
            for (var x = 1; x < rows1.length; x++) { 
            rows1[x].onmouseover = function(){ 
              name = this.className; 
              this.className = "three"; 
            } 
            rows1[x].onmouseout = function(){ 
              this.className = name; 
            } 
             
//             alert("bb"); 
//             alert(rows1[x].getElementsByTagName("input")[0].nodeName); 
            rows1[x].getElementsByTagName("input")[0].onclick=function(){//每一行的input对象 
              document.getElementsByName("allItem")[0].indeterminate=true;//让全选的复选框形状发生变化 
            } 
          } 
        } 
        onload=function(){//在网页加载时候调用 
          toaddcolor(); 
          addEvent(); 
        } 
        function allcheck(nodes){//全选checkbox的点击调用这个 
          var nodess=document.getElementsByName("mail"); 
          for(var x=0;x<nodess.length;x++){ 
            nodess[x].checked=nodes.checked; 
          } 
          //多个全选的时候，必须和其他的一个一样 
          var nodes1=document.getElementsByName("allItem"); 
          for(var x=0;x<nodes1.length;x++){ 
            nodes1[x].checked=nodes.checked; 
          } 
        } 
        function AllBybtn(num){//全选按钮设置 
          var nodess = document.getElementsByName("mail"); 
          /*多重for 循环不太好，可以根据js里面的特性0  非0 
           for (var x = 0; x < nodess.length; x++) { 
            if (num == 1) { 
              nodess[x].checked = 1; 
            }else if (num == 2) { 
                nodess[x].checked = !nodess[x].checked; 
              }else if (num == 3) { 
                  nodess[x].checked = false; 
                } 
          }*/ 
          for(var x=0;x<nodess.length;x++){ 
            if(num<2){ 
              nodess[x].checked=num; 
                //让全选的复选框可以 单独写个函数 
                var all=document.getElementsByName("allItem"); 
                for(var y=0;y<all.length;y++){ 
                  if(num==1){ 
                  all[y].checked=num; 
                }else{ 
                  all[y].checked=num; 
                } 
              } 
            }else{ 
              nodess[x].checked=!nodess[x].checked; 
              var all=document.getElementsByName("allItem"); 
                for (var y = 0; y < all.length; y++) { 
                  all[y].checked=0; 
                } 
            } 
          } 
        } 
         
        function checkBysingle(){//全部入选之后，全选的自动选中 
          var flag = true; 
          var node = document.getElementsByName("mail"); 
          for (var x = 0; x < node.length; x++) { 
            if (node[x].checked == false) { 
              flag = false; 
              break; 
            } 
          } 
           
          var all = document.getElementsByName("allItem"); 
          for (var y = 0; y < all.length; y++) { 
            if (flag) { 
              all[y].checked = true; 
            } 
            else { 
              all[y].checked = false; 
            }}} 
       
      function DelBybtn(){//删除行 
        var tdnode=document.getElementsByName("mail"); 
          /*for(var x=0;x<tdnode.length;x++){ 
          if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
             var trnode=tdnode[x].parentNode.parentNode;//tr对象 
             trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
          // alert("aa"); 
          //节点容器跟Java当中的集合一样，只要是remove()，长度就会变的。这里，需要进行x的复位 
            x--; 
          }*/ 
           
          for(var x=tdnode.length-1;x>=0;x--){ 
            if(tdnode[x].checked){//对象是 checkbox 我们必须要那父级的父级 《tr》，我们需要移除的就是tr对象 
             var trnode=tdnode[x].parentNode.parentNode;//tr对象 
             trnode.parentNode.removeChild(trnode);//table对象移除tr对象 
          } 
          toaddcolor(); 
          addEvent(); 
        } 
      } 
    </script>    
 </head> 
  
 <body> 
  <table id="tabid"> 
    <tr> <th><input type="checkbox" name="allItem" onclick="allcheck(this)"/> 全选 </th> <th>发件人</th> <th>邮件标题</th> <th>邮件附属信息</th></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>张三</td> <td>国庆祝福</td> <td>邮件附属信息1....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息2....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息3....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息4....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Jack</td> <td>假期堵车</td> <td>邮件附属信息5....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr> <td><input type="checkbox" name="mail" onclick="checkBysingle(this)" /> </td> <td>Tom</td> <td>一些广告</td> <td>邮件附属信息6....</td></tr> 
    <tr><td><input type="checkbox"  name="allItem" onclick="allcheck(this)">全选</td> 
      <td colspan=3><input type="button" value="全选" name="btn1" onclick="AllBybtn(1)" /> 
      <input type="button" value="反选" name="btn2" onclick="AllBybtn(2)"/> 
      <input type="button" value="取消全选" name="btn3" onclick="AllBybtn(0)"/> 
      <input type="button" value="删除所选项" name="btn4" onclick="DelBybtn()"/> 
       
       
      </td> 
    </tr> 
  </table> 
 </body> 
</html>

この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

中国語版、とても使いやすい

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ドリームウィーバー CS6

ビジュアル Web 開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。