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:
Hopefully this article will help you learn about JavaScript programming.