js中的DOM操作(2)

1.表格的更加与删除


<!DOCTYPE html>
<html>
<head>
    <title>表格操作</title>
     <style type="text/css">
        table{
            border: 1px solid black;
        }
        tr td{
            border: 1px solid black;
            width: 50px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="年龄" id="age">
    <input type="text" placeholder="姓名" id="uname">
    <button type="button" id="add">增加</button>
    <input type="text" placeholder="输入ID号" id="userId">
    <button type="button" id="del">删除</button>
   <table>
       <thead>
           <tr>
                <td>ID</td>
               <td>姓名</td>
               <td>年龄</td>
               <td>操作</td>
           </tr>
       </thead>
       <tbody>
           <tr>
           <td>1</td>
               <td>张三</td>
               <td>22</td>
               <td><a href="javascript:void(0);">删除</a></td>
           </tr>
           <tr>
                <td>2</td>
               <td>李四</td>
               <td>20</td>
               <td><a href="javascript:void(0);">删除</a></td>

           </tr>
           <tr>
                <td>3</td>
               <td>小王</td>
               <td>11</td>
               <td><a href="javascript:void(0);">删除</a></td>
           </tr>
       </tbody>
   </table>
</div>
<script type="text/javascript">
    var uname = document.getElementById('uname');
    var age = document.getElementById('age');
    var oAdd = document.getElementById('add');
    var oDels = document.getElementsByTagName('a');
    var oTab = document.getElementsByTagName('table')[0];
    var oDel = document.getElementById('del');
    var uid = document.getElementById('userId');
    var num = oTab.tBodies[0].rows.length;
    oAdd.onclick = function (){
        var oTr = document.createElement('tr');
        var info = new Array();
        info.push(++num);
        info.push(uname.value);
        info.push(age.value);
        info.push("<a href='javascript:void(0);'>删除</a>");
        var len = info.length;
        for(var i=0; i<len;i++){
            var oTd = document.createElement('td');
            oTd.innerHTML = info.shift();
            oTr.appendChild(oTd);
        }
        oTab.tBodies[0].appendChild(oTr);
        for(var i=0; i<oDels.length; i++){
            var del = oDels[i];
            del.onclick = function (){
                oTab.tBodies[0].removeChild(this.parentNode.parentNode);
            }
        }
    }
    for(var i=0; i<oDels.length; i++){
        var del = oDels[i];
        del.onclick = function (){
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        }
    }
    oDel.onclick = function (){
        var id = uid.value;
        var rows = oTab.tBodies[0].rows;
        for(var i=0; i<rows.length; i++){
            if(id == rows[i].cells[0].innerHTML){
                 var parent = rows[i].cells[0].parentNode;
                 parent.parentNode.removeChild(parent);
                 return;
            }
        }
    }
</script>
</body>
</html>

2.鼠标控制每行变色


<!DOCTYPE html>
<html>
<head>
    <title>表格操作</title>
     <style type="text/css">
        table{
            border: 1px solid black;
        }
        tr td{
            border: 1px solid black;
            width: 50px;
        }
    </style>
</head>
<body>
   <table>
       <thead>
           <tr>
                <td>ID</td>
               <td>姓名</td>
               <td>年龄</td>
           </tr>
       </thead>
       <tbody>
           <tr>
           <td>1</td>
               <td>张三</td>
               <td>22</td>
           </tr>
           <tr>
                <td>2</td>
               <td>李四</td>
               <td>20</td>
           </tr>
           <tr>
           <td>3</td>
               <td>小王</td>
               <td>11</td>
           </tr>
       </tbody>
   </table>
</div>
<script type="text/javascript">
    var oTab = document.getElementsByTagName('table')[0];
    var oRows = oTab.tBodies[0].rows;
    for(var i=0; i<oRows.length; i++){
        oRows[i].style.background = "#DCDCDC";
        oRows[i].onmouseover = function (){
            this.style.background = "gray";
        }
        oRows[i].onmouseout = function (){
            this.style.background = "#DCDCDC";
        }
    }
</script>
</body>
</html>

3.字符串大小写转换


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
  var str = "AbCd";
  alert(str.toUpperCase());
  alert(str.toLowerCase());
</script>
</body>
</html>

4.模糊搜索


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
  var str = "AbCdef";
  //查找时区分大小写,若找到则返回子串的起始位置,否则返回-1
  if(str.search("bC") != -1){
    alert("find out");
  }
</script>
</body>
</html>

5.字符串分割


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
  var str = "AbCdef 张 小";
  //查找时区分大小写,若找到则返回子串的起始位置,否则返回-1
  var strEles = str.split(' ');
  for(var i=0; i<strEles.length; i++){
    alert(strEles[i]);
  }
</script>
</body>
</html>

6.列表排序


<!DOCTYPE html>
<html>
<head>
<title>列表排序</title>
</head>
<body>
<button type="button" id="sort">排序</button>
<ul>
    <li>13</li>
    <li>2</li>
    <li>5</li>
    <li>4</li>
</ul>
<script type="text/javascript">
    var oUl = document.getElementsByTagName('ul')[0];
    //返回所有li元素集合(全是对象引用)
    var oLis = oUl.getElementsByTagName('li');
    var arr = new Array();
    for(var i=0; i<oLis.length; i++){
        arr.push(oLis[i]);
    }
    //调整数组中引用的顺序
    arr.sort(function(li1, li2){
        var num1 = parseInt(li1.innerHTML);
        var num2 = parseInt(li2.innerHTML);
        return num1 - num2;
    });

    var oBtn = document.getElementById('sort');
    oBtn.onclick = function (){
        for(var i=0; i<oLis.length; i++){
            //如果子节点中有相同的引用,则先将引用删除,再将新的添加到尾部
            oUl.appendChild(arr[i]);
        }
    }
</script>
</body>
</html>

 

posted @ 2016-05-23 11:37  被罚站的树  阅读(172)  评论(0编辑  收藏  举报