Home >Web Front-end >JS Tutorial >Javascript_13_DOM_mailing list

Javascript_13_DOM_mailing list

黄舟Original: 2017-01-18 16:51:321150browse

Javascript_13_DOM_mailing list

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title>DOM_邮件列表</title>
    <link rel="stylesheet" type="text/css" href="table.css"/>
    <style type="text/css">
      .odd{
        background-color:#9bf7d5;
      }
      .even{
        background-color:#f3e99a;
      }
      .over{
        background-color:#ef7125;
      }
      body{
        margin: 0px;
      }
    </style>
    <script type="text/javascript">
    //===========================================
      //行颜色间隔显示功能。
      var class_Name;
      function changeColor(){
        //1,获取表格对象。
        var oTab = document.getElementById("tab_id_1");
        //2，获取行对象。
        var collTr = oTab.rows;
        //3，对所有行进行遍历(除了第1行和最后一行)。
        for(var x=1; x<collTr.length-1;x++){
          if(x%2==1){
            collTr[x].className = "odd";
          }else{
            collTr[x].className = "even";
          }
          collTr[x].onmouseover = function(){
            class_Name = this.className;
            this.className = "over";
          }
          collTr[x].onmouseout = function(){
            this.className = class_Name;
          }
        }
      }
      //===========================================
      //文档一加载完毕就换颜色
      onload = function(){
        changeColor();
      }
      //===========================================
      //复选框checkbox的全选动作。
      function chooseAll(oCheckbox){
        //获取所有的mail复选框。 
        var collCheckbox = document.getElementsByName("mail");
        for(var x=0; x<collCheckbox.length; x++){
          collCheckbox[x].checked = oCheckbox.checked;
        }
      }
      //===========================================
      //定义操作复选框按钮的方法。
      function choose_By_Button(num){
        var collCheckbox = document.getElementsByName("mail");
        for(var x=0; x<collCheckbox.length; x++){
          if(num>1)//2代表反选
            collCheckbox[x].checked = !collCheckbox[x].checked;//反选
          else//1代表全选，0代表取消
            collCheckbox[x].checked = num;//全选或全部取消
        }
      }
      //===========================================
      //删除所选邮件。
      function deleteMail(){
        if (!confirm("你真的要删除所选的邮件吗？")){
          return;
        } 
        //获取所有的mail节点
        var collCheckbox = document.getElementsByName("mail");
        for (var x = 0; x < collCheckbox.length; x++) {
          if (collCheckbox[x].checked) {
            //input的父结点是td,td父结点是tr
            var oTr = collCheckbox[x].parentNode.parentNode;
            //tr父结点是tbody
            oTr.parentNode.removeChild(oTr);
            x--;//但凡remove都会改变长度！千万注意！
          }          
        }
        //删除完后，记得重新改变颜色！
        changeColor();
      }
    </script>
  </head>
  <body>
  <table id="tab_id_1">
  <tr>
      <th>
          <input type="checkbox" name="all" onclick="chooseAll(this)"  />全选
        </th>
        <th>
          发件人
        </th>
        <th>
          邮件名称
        </th>
        <th>
          邮件附属信息
        </th>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_11
        </td>
        <td>
          我是邮件11
        </td>
        <td>
          我是附属信息11
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_22
        </td>
        <td>
          我是邮件22
        </td>
        <td>
          我是附属信息22
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_33
        </td>
        <td>
          我是邮件33
        </td>
        <td>
          我是附属信息33
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_44
        </td>
        <td>
          我是邮件44
        </td>
        <td>
          我是附属信息44
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_55
        </td>
        <td>
          我是邮件55
        </td>
        <td>
          我是附属信息55
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_66
        </td>
        <td>
          我是邮件66
        </td>
        <td>
          我是附属信息66
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_77
        </td>
        <td>
          我是邮件77
        </td>
        <td>
          我是附属信息77
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_88
        </td>
        <td>
          我是邮件88
        </td>
        <td>
          我是附属信息88
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_99
        </td>
        <td>
          我是邮件99
        </td>
        <td>
          我是附属信息99
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent_100
        </td>
        <td>
          我是邮件100 
        </td>
        <td>
          我是附属信息100
        </td>
    </tr>
    <tr>
      <td>
          <input type="checkbox" name="mail" />
        </td>
        <td>
          pre_eminent__a
        </td>
        <td>
          我是邮件_a
        </td>
        <td>
          我是附属信息_a
        </td>
    </tr>
    <tr>
      <th>
          <input type="checkbox" name="all" onclick="chooseAll(this)"  />全选
        </th>
        <th colspan="3">
          <input type="button" value="全选" onclick="choose_By_Button(1)" />
            <input type="button" value="取消全选" onclick="choose_By_Button(0)"  />
            <input type="button" value="反选" onclick="choose_By_Button(2)"  />
            <input type="button" value="删除所选附件" onclick="deleteMail()" />
        </th>
    </tr>
</table>
  </body>
</html>

The above is the content of Javascript_13_DOM_mailing list. For more related content, please pay attention to the PHP Chinese website (www.php.cn )!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Javascript_12_DOM_Table sortingNext article：Javascript_12_DOM_Table sorting

See more

Javascript_13_DOM_mailing list

Related articles