对比---添加,移除,提交,重置.

来源：互联网发布：ubuntu 不显示标题栏编辑：程序博客网时间：2024/04/30 00:44

<html>
<head>
  <script>
   var datas = [
     {id:'1',name:'华厦红利'},
     {id:'2',name:'茂业集团'},
     {id:'3',name:'成商集团'}
   ];
   var selectedIdx = {};
   function addCompare(fid){
    if( selectedIdx[fid] || getSelectedItems().length == 2 ) return;

    var ul = document.getElementById("compareItems");
    for(var i = 0; i < datas.length; i ++ ){
     if( datas[i].id == fid ){
      var li = document.createElement('li');
      var liid = datas[i].id;
      li.id = liid;
      var str = datas[i].name + ' <button onclick="removeLI(/''+ liid + '/')">移除</button>';
      li.innerHTML = str;
      ul.appendChild(li);

      selectedIdx[datas[i].id] = datas[i].id;
      break;
     }
    }
   }

   function removeLI(liid){
    var ul = document.getElementById("compareItems");
    var li = document.getElementById(liid);
    if( li ){
     ul.removeChild(li);
     delete selectedIdx[liid];
    }
   }

   function clearItems(){
    selectedIdx = {};
    var ul = document.getElementById("compareItems");
    ul.innerHTML = '';
   }

   function getSelectedItems(){
    var result = [];
    var tmp = {};
    for(var p in selectedIdx){
     if( tmp[p] != selectedIdx[p] ){
      result.push(p);
     }
    }
    return result;
   }
  </script>
</head>
<body>
  <div style="width:90px;height:25px;border:2px solid orange;float:left;text-align:center">对比栏</div>
  <div style="width:200px;height:400px;border:1px solid black;clear:left;float:left;position:relative;padding:4px">
   <input id="input_id"> <button onclick="addCompare(document.getElementById('input_id').value)">添加</button>
   <ul id="compareItems" style="display:block;list-style:none;width:100%">

   </ul>
   <br>
   <button onclick="alert(getSelectedItems())">开始比较</button> <button onclick="clearItems()">消除</button>
  </div>
</body>
</html>