DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS表的模擬方法
JS表的模擬方法
編輯:關於JavaScript     

本文實例講述了JS表的模擬方法。分享給大家供大家參考。具體方法如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>列表</title>
    <script>
     function List(){
      this.listSize= 0;
      this.pos=0;
      this.dataStore=[];//初始化一個空數組來保存列表元素
      this.clear =clear;
      this.find = find;
      this.toString= toString;
      this.insert = insert;
      this.append= append;
      this.remove =remove;
      this.front = front;
      this.end = end;
      this.prev =prev;
      this.next = next;
      this.length= length;
      this.currPos= currPos;
      this.moveTo= moveTo;
      this.getElement =getElement;
      this.length = length;
      this.contains = contains;
      function append(element){
        this.dataStore[this.listSize++] = element;
      };
      function find(element){
        for(var i =0; i<this.dataStore.length; i++){
          if(this.dataStore[i]===element){
            return i ;
          }
        }
        return -1;
      }
      function remove(element){
        var foundAt =this.find(element);
        if(foundAt!=-1){
          this.dataStore.splice(foundAt,1);
          this.listSize--;
          return element;
          //return true 原本是這樣,後面本人改為ELEMENT
        }else{
          return false;
        }
      }
      function length(){
        return this.listSize;
      }
      function toString(){
        return this.dataStore;
      }
      function insert(element,after){
        var insertPos = this.find(after);
        if(insertPos!=-1){
          this.dataStore.splice(insertPos+1,0,element);
          this.listSize++;
          return true;
        }else{
          return false;
        }
      }
      function clear (){
        delete this.dataStore;
        this.listSize=0;
        this.pos=0;
        this.dataStore=[];
      }
      function contains(element){
        for(var i =0; i<this.dataStore.length; i++){
          if(this.dataStore[i]===element){
            return true ;
          }        
        }
        return false;
      }
      function front(){
        this.pos = 0;
      }
      function end(){
        this.pos = this.listSize-1;
      }
      function prev(){
        // if(this.pos> 0){
          --this.pos;
       // }
      }
      function next(){
        // if(this.pos< this.listSize-1){
          ++this.pos;
        // }
      }
      function currPos(){
        return this.pos;
      }
      function moveTo(pos){
        this.pos= pos;     
      }
      function getElement(){
        return this.dataStore[this.pos];
      }
     }
     var list = new List();
     list.append({name:'夏廣成',sex:'男'});
     list.append({name:'江榮盛',sex:'男'});
     list.append({name:'杜強',sex:'男'});
     list.append({name:'巧華',sex:'女'});
     list.append({name:'方陽',sex:'男'});
    for(list.front(); list.currPos() < list.length() ; list.next()){
     var item = list.getElement();
     if(item.sex =='女'){
      list.remove(item);
     }
    }
    for(list.front(); list.currPos() < list.length() ; list.next()){
     var item = list.getElement();
      console.log(item.name);
    }
    </script>
  </head>
  <body >
  </body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved