javascript實現(xiàn)Email郵件顯示與刪除功能
更新時間：2015年11月21日 10:07:28 作者：YX_blog
這篇文章主要介紹了javascript實現(xiàn)Email郵件顯示與刪除功能，需要的朋友可以參考下
一、主要介紹：
這題采用之前的技術(shù)，根據(jù)table的rows屬性，獲得數(shù)組，然后對數(shù)組設(shè)置樣式，所以顏色就出來了。
1）.全選復(fù)選框，通過var nodess=document.getElementsByName("mail");
for(var x=0;x<nodess.length;x++){
nodess[x].checked=nodes.checked;
}
復(fù)選框函數(shù)進行
2）.按鈕全選，反選，和取消全選，可以用一個函數(shù)寫，傳入不同的參數(shù)AllBybtn(num）類型即可
函數(shù)里面 根據(jù)js的特性 非0 和 0 這兩種狀態(tài)，進行設(shè)置，為了同步，需要分別進行設(shè)置
3）.為了顯示出當(dāng)全部選中就默認(rèn)全選的復(fù)選框選中，所以需要對每一個復(fù)選框進行設(shè)置，采用函數(shù)checkBysingle()進行設(shè)置
4）.刪除所選項是需要主要，當(dāng)前的是checkbox對象，上一級是td--tr--先拿到tr對象，然后對通過tr的父節(jié)點刪除tr對象再刪除之后，x會變化，可能有些刪不到，所以需要將X的值還原，或者從后面開始刪除。
2、樣式設(shè)置：
<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>
三、背景顏色以及鼠標(biāo)移動的事件設(shè)置
function toaddcolor(){
//顏色設(shè)置，
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;
//當(dāng)鼠標(biāo)移上去之后發(fā)生相應(yīng)的變化
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;//讓全選的復(fù)選框形狀發(fā)生變化
}
}
}
onload=function(){//在網(wǎng)頁加載時候調(diào)用
toaddcolor();
addEvent();
}
四、復(fù)選框的全選
function allcheck(nodes){//全選checkbox的點擊調(diào)用這個
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){//全選按鈕設(shè)置
var nodess = document.getElementsByName("mail");
/*多重for 循環(huán)不太好，可以根據(jù)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;
//讓全選的復(fù)選框可以 單獨寫個函數(shù)
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;
}}}
七、刪除郵件的函數(shù)（刪除行）
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");
//節(jié)點容器跟Java當(dāng)中的集合一樣，只要是remove()，長度就會變的。這里，需要進行x的復(fù)位
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();//調(diào)用顏色的設(shè)置
}
}
現(xiàn)象一：
反選效果：
刪除前：
刪除后：
完整代碼：
<!DOCTYPE html>
<html>
<head>
<!--
這題采用之前的技術(shù)，根據(jù)table的rows屬性，獲得數(shù)組，然后對數(shù)組設(shè)置樣式，所以顏色就出來了
1，全選復(fù)選框，通過var nodess=document.getElementsByName("mail");
for(var x=0;x<nodess.length;x++){
nodess[x].checked=nodes.checked;
}
復(fù)選框函數(shù)進行
2，按鈕全選，反選，和取消全選，可以用一個函數(shù)寫，傳入不同的參數(shù)AllBybtn(num）類型即可
函數(shù)里面 根據(jù)js的特性 非0 和 0 這兩種狀態(tài)，進行設(shè)置，為了同步，需要分別進行設(shè)置
3，為了顯示出當(dāng)全部選中就默認(rèn)全選的復(fù)選框選中，所以需要對每一個復(fù)選框進行設(shè)置，采用函數(shù)checkBysingle()進行設(shè)置
4,刪除所選項是需要主要，當(dāng)前的是checkbox對象，上一級是td--tr--先拿到tr對象，然后對通過tr的父節(jié)點刪除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(){
//顏色設(shè)置，
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;
//當(dāng)鼠標(biāo)移上去之后發(fā)生相應(yīng)的變化
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;//讓全選的復(fù)選框形狀發(fā)生變化
}
}
}
onload=function(){//在網(wǎng)頁加載時候調(diào)用
toaddcolor();
addEvent();
}
function allcheck(nodes){//全選checkbox的點擊調(diào)用這個
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){//全選按鈕設(shè)置
var nodess = document.getElementsByName("mail");
/*多重for 循環(huán)不太好，可以根據(jù)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;
//讓全選的復(fù)選框可以 單獨寫個函數(shù)
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");
//節(jié)點容器跟Java當(dāng)中的集合一樣，只要是remove()，長度就會變的。這里，需要進行x的復(fù)位
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>發(fā)件人</th> <th>郵件標(biāo)題</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>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js+canvas實現(xiàn)驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
innerHTML動態(tài)添加html代碼和腳本兼容多個瀏覽器
innerHTML動態(tài)添加html代碼和腳本，給某個元素的innerHTML賦值,并使得值中的js代碼有效且兼容多個瀏覽器，很棒的一個方法2014-10-10
不論你是javascript新手還是老鳥，不論是面試求職，還是日常開發(fā)工作，我們經(jīng)常會遇到這樣的情況：給定的幾行代碼，我們需要知道其輸出內(nèi)容和順序。接下來通過本文給大家分享 JavaScript 執(zhí)行機制，感興趣的朋友一起看看吧2018-10-10
這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
用JS實現(xiàn)的radio圖片選擇按鈕效果2010-01-01
HTML5基于Tomcat 7.0實現(xiàn)WebSocket連接并實現(xiàn)簡單的實時聊天
WebSocket 是一種自然的全雙工、雙向、單套接字連接。這篇文章給大家介紹了HTML5基于Tomcat 7.0實現(xiàn)WebSocket連接并實現(xiàn)簡單的實時聊天，感興趣的朋友一起學(xué)習(xí)吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)電子簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
省市區(qū)三級聯(lián)動下拉框菜單javascript版
這篇文章主要給大家介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單，有需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript進度管理，對進度管理感興趣的同學(xué)，可以參考下2021-04-04
寫了幾年代碼，很少談到j(luò)avascript程序的執(zhí)行效率問題，今天就舉幾個例子看看，讓大家看看程序優(yōu)化是多么重要。 這節(jié)來看看createElement和innerHTML的表現(xiàn)?？纯床顒e是多大2008-05-05