Js对象操作的例子

最新推荐文章于 2024-07-16 10:08:12 发布

原创最新推荐文章于 2024-07-16 10:08:12 发布 · 593 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#object #function #header #table #div #button

本文介绍了一个用于展示购物车数据的JavaScript脚本。该脚本通过解析数据表格来创建购物车对象，并根据不同公司分组显示商品标题、数量、单价及总计等信息。此外，还实现了关闭面板的功能。

/**
* @author 118pc.com
*/

var NetShop = new Object();

NetShop.util = {
createTd: function(htmlString, cssClass){
  var td = document.createElement('td');
  td.className = cssClass;
  td.innerHTML = htmlString;

  return td;
}
}

NetShop.BuyCarObject = function(dataTable){
var buyCar = new Object();

for(var i = 0; i < dataTable.Rows.length; i++){
  var dataRow = dataTable.Rows[i]

  var buyCarInfo = new Object();
  buyCarInfo.title = dataRow['Title'];
  buyCarInfo.number = parseInt(dataRow['num']);
  buyCarInfo.price = parseFloat(dataRow['price']);
  buyCarInfo.count = buyCarInfo.number * buyCarInfo.price;

  var key = dataRow['userId'];
  if(!buyCar.hasKey(key)){
   buyCar[key] = new Array();
   buyCar[key].companyName = dataRow['CompanyName'];
  }

  buyCar[key].push(buyCarInfo);
}

return buyCar;
}

NetShop.Page = new Object();

NetShop.Page.BuyCar = new Object();

NetShop.Page.BuyCar.Panel = function(dataTable){
var buyCarObject = new NetShop.BuyCarObject(dataTable);

var panel = document.createElement('div');
panel.className = 'panel';

for(key in buyCarObject){
  var buyCarInfoList = buyCarObject[key];

  if(buyCarInfoList.length > 0 && buyCarInfoList.companyName){
   var header = document.createElement('div');
   header.className = 'header';
   header.appendChild(document.createTextNode(buyCarInfoList.companyName));
   panel.appendChild(header);

   for(var i = 0; i < buyCarInfoList.length; i++){
    var buyCarInfo = buyCarInfoList[i];

    var table = document.createElement('table');
    table.cellpadding = 0;
    table.cellspacing = 0;
    table.border = 0;
    table.className = 'table';
    panel.appendChild(table);

    var tBody = document.createElement('tbody');
    table.appendChild(tBody);

    var tr = document.createElement('tr');
    tBody.appendChild(tr);

    var td1 = NetShop.util.createTd(buyCarInfo.title, 'td1');
    tr.appendChild(td1);

    var td2 = NetShop.util.createTd(buyCarInfo.number, 'td2');
    tr.appendChild(td2);

    var td3 = NetShop.util.createTd(buyCarInfo.price + ' 鈧?, 'td2');
    tr.appendChild(td3);

    var td4 = NetShop.util.createTd(buyCarInfo.count + ' 鈧?, 'td2');
    tr.appendChild(td4);
   }
  }
}

var bottom = document.createElement('div');
bottom.className = 'bottom';
panel.appendChild(bottom);

var closeBtn = document.createElement('input');
closeBtn.type = 'button';
closeBtn.value = 'close me';
closeBtn.className = 'closeBtn';
closeBtn.onclick = function(){
  panel.parentNode.style.visibility = 'hidden'
};
bottom.appendChild(closeBtn);

return panel;
}