JS中级 - 02：表单、表格

getElementsByTagName()

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。

自定义 getElementsByClassName 方法

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script type="text/javascript">

    window.onload =function (argument) {

      var oUl1 = document.getElementById('ul1');

      console.info(oUl1)

      var aLi = getElementsByClassName(oUl1,'li','box');

      //设置 aLi 背景色

      for (var i = 0; i < aLi.length; i++) {

        aLi[i].style.background = 'red';

      }

      alert(aLi.length);

  //自定义getElementsByClassName方法

  function getElementsByClassName(parent,tagName,className){

    var aEls = parent.getElementsByTagName(tagName);

    var arr = [];

    for (var i = 0; i < aEls.length; i++) {

      var aClassName = aEls[i].className.split(' ');

      console.log(aClassName.length);

      for (var j = 0; j < aClassName.length; j++) {

        if (aClassName[j] == className) {

          arr.push(aEls[i]);

          //class="box box" 出于各种原因，出现这种情况

          //用break只向 arr 添加第1个 box

           break;

        }

      }

      // if (aEls[i].className == className) {

      //  arr.push(aEls[i]);

      // }

    }

    return arr;

  }

}

</script></head>

<body>

  <ul id ="ul1">

    <li>1111111</li>

    <li class="box box">2222222</li>

    <li class="box1">3333333</li>

    <li class="box box2">4444444</li>

  </ul>

    <ul id="ul2">

    <li>1111111</li>

    <li class="box box">2222222</li>

    <li class="box1">3333333</li>

    <li class="box box2">4444444</li>

  </ul>

  <p class="box"></p>

</body>

</html> 

1.1

表格应用

   tHead :表格头

    tBodies：表格正文   //数组

    tFoot：表格尾    

    rows：行                //数组

    cells ：列              //数组

  <table id="tab1" width="80%" border="1px">

    <thead>

    <tr>      

    <th>编号</th>

      <th>Name</th>

      <th>Sex</th>

      <th>操作</th>        

    </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>Li Lei</td>

        <td>男</td>

        <td>

          <a href="javascript:;">删除</a>

        </td>

      </tr>

      <tr>

        <td>2</td>

        <td>Han MeiMei</td>

        <td>女</td>

        <td>

          <a href="javascript:;">删除</a>

        </td>

      </tr>

    </tbody>

  </table> 

JS方法

      /*

        tHead     :表格头

        tBodies   ：表格正文

        tFoot   ：表格尾

          rows  ：行

          cells   ：列

        */

        console.log("tHead:");

        console.log(oTable.tHead);   //<tHead>..</tHead>

        console.log("tBodies:");

        console.log(oTable.tBodies);  //[tbody]

        console.log("tFoot:");

        console.log(oTable.tFoot);  //null

        console.log("rows:");

        console.log(oTable.rows); //[tr,tr,tr]

        console.log("cells:");

        console.log(oTable.cells);  // undefined

      //console.info(oTable.children[1].children[1].children[1].innerHTML) //Han MeiMei

        console.info(oTable.tBodies[0].rows[1].cells[1].innerHTML)  //Han MeiMei 

1.2

示例

表格的创建

数据添加

隔行变色

删除一行

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<script type="text/javascript">

  window.onload =  function (argument) {

    var data = [

    {id:1,username:'leo',sex:'男'},

    {id:2,username:'xiaomei',sex:'女'},

    {id:3,username:'wangliang',sex:'男'},

    {id:4,username:'telly',sex:'女'}

    ];

    var oTab = document.getElementById('tab1');

    var oTbody = oTab.tBodies[0];

    for (var i = 0; i < data.length; i++) {

      var oTr = document.createElement('tr');

      //编号

      var oTd  =document.createElement('td');

      oTd.innerHTML = data[i].id;

      oTr.appendChild(oTd);

      //姓名

       oTd  =document.createElement('td');

       oTd.innerHTML = data[i].username;

       oTr.appendChild(oTd);

       //性别

       oTd  =document.createElement('td');

       oTd.innerHTML = data[i].sex;

       oTr.appendChild(oTd);

       //删除

       oTd  =document.createElement('td');

       var oA = document.createElement('a');

       oA.innerHTML ='删除';

       oA.href ='javascript:;';

       oA.onclick =function (){     

      //删除一行

      oTbody.removeChild(this.parentNode.parentNode);

        //重新渲染

        for (var i = 0; i < oTbody.rows.length; i++) {

          if (i%2) {

            oTbody.rows[i].style.background="gray";

          }else{

            oTbody.rows[i].style.background="white";

          }

        }

      };

      oTd.appendChild(oA);

      oTr.appendChild(oTd);

      /*

       * 隔行变色

       */

       if (i%2) {

        oTr.style.background="gray";

       }

      oTbody.appendChild(oTr);

    }

  }

</script>

</head>

<body>

  <table id="tab1" width="80%" border="1px">

    <thead>

      <tr>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>操作</th>

      </tr>

    </thead>

    <tbody>

    </tbody>

  </table>

</body>

</html> 

2.1

表单

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <script type="text/javascript">

    window.onload = function(argument) {

      var oForm = document.getElementById('form1');

      /*

       * 查找表单下的控件（使用name）

       * 表单.控件name

       * alert(oForm.text1.value)  //文本框

       */

      /*

       *【onchange】 :当值发生改变的时候触发

       *  text : 当光标离开的时候如果内容有变化就触发 

       *  radio/checkbox: 标准下值变了就触发

       *      非标准下焦点离开的时候如果值变了就会触发

       */

      oForm.city.onchange = function() {

        //alert(this.value)

      }

      oForm.button.onclick = function() {

        //性别radio

        if (oForm.sex[0].checked) {

          console.log('性别：男');

        } else {

          console.log('性别：女');

        }

        //多选checkbox

        var content = "";

        for (var i = 0; i < oForm.checkbox.length; i++) {

          if (oForm.checkbox[i].checked) {

            content += oForm.checkbox[i].value + ' ';

          }

        }

        console.log(content);

        //地区select

        console.log(oForm.city.options[oForm.city.selectedIndex].value)

      }

    }

  </script>

</head>

<body>

  <form id="form1">

    <div>

      <input type="text" name="text1" value="文本框"></div>

    <div>

      <input type="radio" name="sex" value="男" checked>   

      男

      <input type="radio" name="sex" value="女">女</div>

    <div>

      <input type="checkbox" name="checkbox" value="html">    

      html

      <input type="checkbox" name="checkbox" value="css">   

      css

      <input type="checkbox" name="checkbox" value="js">js</div>

    <div>

      <select name="city" id="mySelect">

        <option value="">请选择</option>

        <option value="北京">北京</option>

        <option value="重庆">重庆</option>

        <option value="上海">上海</option>

      </select>

    </div>

    <input type="button" value="提交" name="button">

  </form>

</body>

</html> 

来自为知笔记(Wiz)