JavaScript realizes email message display and deletion function _javascript skill

Source: Internet
Author: User

First, the main introduction:
The previous technique, based on the rows property of the table, gets the array and then sets the style for the group, so the color comes out.

1. Select all check boxes , via var nodess=document.getelementsbyname ("Mail");

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

nodess[x].checked=nodes.checked

}

check box function to

2. Select all buttons, uncheck, and deselect all, you can write with a function and pass in different parameter allbybtn (num) type.

function in accordance with the characteristics of JS not 0 and 0 of these two states, to set up, in order to sync, you need to set up separately

3). In order to show that the default Select all check box is selected when all is checked, you need to set each check box to use the function Checkbysingle () to set

4). Deletion of the selected items is required, the current CheckBox object, the upper level is td--tr--first to get the TR object, and then to the parent node through TR delete the TR object and then delete, X will change, some may not be deleted, so you need to restore the value of x, or from the beginning of the deletion.

2. Style setup:

<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> 

Third, background color and mouse movement event settings

  function Toaddcolor () {//color settings, var nodes = document.getElementById ("TabID"); 
          var rows1 = nodes.rows; 
            for (var x = 1; x < Rows1.length + +) {if (x 2 = 0) {rows1[x].classname = "one"; 
            else {rows1[x].classname = "two"; 
            }} function Addevent () {var name; 
            When the mouse moves up, the corresponding changes occur var Nodes=document.getelementbyid ("TabID"); 
            var rows1=nodes.rows; for (var x = 1; x < Rows1.length + +) {rows1[x].onmouseover = function () {name = This.cla 
              Ssname; 
            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 () {//per row of the input object Document.getelementsbyname ("Allitem") [0]. 
          indeterminate=true;//Make all selected check box shapes Change}} onload=function () {//Call on page load 
          Toaddcolor (); 
        Addevent ();  }

Four, the check box select all

function Allcheck (nodes) {//Select all checkbox calls this 
          var nodess=document.getelementsbyname ("Mail"); 
          for (Var x=0;x<nodess.length;x++) { 
            nodess[x].checked=nodes.checked 
          } 
          Multiple selections must be the same as the other one 
          var nodes1=document.getelementsbyname ("Allitem"); 
          for (Var x=0;x<nodes1.length;x++) { 
            nodes1[x].checked=nodes.checked 
          } 
        } 

Five, the button select all

function allbybtn (num) {//All Select button Set var nodess = Document.getelementsbyname ("Mail"); 
              /* Multiple for loop is not very good, can be based on the characteristics of JS 0 not 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].check 
                Ed=num; 
                Let the Select checkbox individually write a function of 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;  }}}}

Six, all items are selected, select Automatically selected

function Checkbysingle () {//All selected automatically select      
          var flag = true; 
          var node = Document.getelementsbyname ("Mail"); 
          for (var x = 0; x < Node.length + +) { 
            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; 
            

Seven, delete the message function (delete row)

function delbybtn () {//delete line 
  var tdnode=document.getelementsbyname ("Mail"); 
    /*for (var x=0;x<tdnode.length;x++) { 
    if (tdnode[x].checked) {//object is checkbox we must have that parent's parent, TR, we need to remove is the TR object 
       Var trnode=tdnode[x].parentnode.parentnode;//tr object 
       trnode.parentNode.removeChild (Trnode);// The Table object removes the TR object 
    //alert ("AA"); 
    The node container is the same as the collection in Java, as long as the Remove (), the length will change. Here, an x is required to reset the 
      x--. 
    * 
    /for (Var x=tdnode.length-1;x>=0;x--) { 
      if (tdnode[x].checked) {//object is checkbox we have to have that parent's parent, TR, What we need to remove is the TR object 
       var trnode=tdnode[x].parentnode.parentnode;//tr object 
       trnode.parentNode.removeChild (Trnode) ;//table Object Remove TR object 
    } 
    loading ()//Call color's settings 
  } 

Phenomenon One:

Anti-selection effect:

Before deleting:

After deletion:

Complete code:

<! DOCTYPE html>  

Hopefully this article will help you learn about JavaScript programming.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.