用HTML5的WebSQL Database 做一个简单页面:

做了一个小购物车的结算页面,使用webSQL,实现本地,前端的一个存取过程.,商品的页面元素是动态生成了,在从dom获取元素的时候会出现意想不到的问题!

仅供参考相关的使用思路:

    
    
    
    
    

    
    

    
    

    
    
    
   


   

    
        
        
        
        
        
        
        
        
    
    
    
    
    
        
        
        
         
       
        
      

    

        
        
订阅
          推荐
        
        
      
 
      
   
  双12活动价格抢先看 



    

        
 
        
  全选
        
商品名称
        
单价
        
数量
        
        
操作
    
    

      
    




    
去结算
    
合计：0元





    
买购物车中商品的人还买了

    

        

            
              

            
              

                
一家不会撞衫的店
                
              
          
          

            
              

            
              

                
韩系毛衣学院风
                
              
          
    


    

      

        
 主页
        
消息
        
购物车
        
我的淘宝
      



  
  
  


   

window.onload = function () {
  var db = openDatabase("oneDB", "1.0", "Test DB", 10 * 1024 * 1024);
  var msg;
  db.transaction(function (tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS oneDB(id , log,name,text)");
  });

  db.transaction(function (tx) {
    //取出数据库内容
    tx.executeSql(
      "select * from oneDB",
      [],
      function (tx, results) {
        var len = results.rows.length;
        var id;
        var msg;
        var pr;
        var na;

        for (var i = 0; i < len; i++) {
          //拿到对象,也就是数据库中存的log对应的值
          id = results.rows.item(i).id;
          msg = results.rows.item(i).log;
          pr = results.rows.item(i).name;
          na = results.rows.item(i).text;
          //   var dic = document.createElement('div');
          //   dic.id="goods"
          var tupian = document.createElement("img");
          tupian.src = msg;
          tupian.style.cssText =
            "width:15%;height:100px; display: inline-block;";
          var p1 = document.createElement("span");
          p1.innerText = pr;
          p1.style.cssText =
            "font-size:5px;font-weight:50px;margin:5px 3%; width:10px";
          var p2 = document.createElement("span");
          p2.innerText = na;
          p2.style.cssText =
            "font-size:5px;font-weight:50px; 10px; width:19%;margin-right:3%";
          var input = document.createElement("input");
          input.type = "checkbox";
          input.className = "input";
          input.name = "option";
          input.style.cssText = "margin-left:5px; width:5%";
          var number = document.createElement("span");
          number.innerText = "x1";
          number.style.cssText =
            "font-size:5%;font-weight:50px;margin-left:5%; width:9%";
          var xioaji = document.createElement("input");
          xioaji.type = "text";
          xioaji.id = "a1";
          xioaji.style.cssText =
            "margin-left:10%;width:10%;height:50px; outline-style: none; ";

          var butt = document.createElement("input");
          butt.type = "button";
          butt.className = "A";
          butt.value = "删除";

          butt.style.cssText =
            "margin-left:10%;width:10%;height:20px; background-color: #FF4B00;color:#fff; border:0 none;";
          var br = document.createElement("br");
          var ty = document.getElementById("status");

          ty.appendChild(input);
          ty.appendChild(tupian);
          ty.appendChild(p2);
          ty.appendChild(p1);
          ty.appendChild(number);
          // ty.appendChild(xioaji);

          ty.appendChild(butt);
          ty.appendChild(br);
        }
      },
      null
    );
  });


};

window.onload = function () {
  initial();

  count();
};

function initial() {
  var db = openDatabase("oneDB", "1.0", "Test DB", 10 * 1024 * 1024);
  var msg;
  db.transaction(function (tx) {
    tx.executeSql("CREATE TABLE IF NOT EXISTS oneDB(id , log,name,text)");
  });

  db.transaction(function (tx) {
    //取出数据库内容
    tx.executeSql(
      "select * from oneDB",
      [],
      function (tx, results) {
        var len = results.rows.length;
        var id;
        var msg;
        var pr;
        var na;

        for (var i = 0; i < len; i++) {
          //拿到对象,也就是数据库中存的log对应的值
          id = results.rows.item(i).id;
          msg = results.rows.item(i).log;
          pr = results.rows.item(i).name;
          na = results.rows.item(i).text;
          //   var dic = document.createElement('div');
          //   dic.id="goods"
          var tupian = document.createElement("img");
          tupian.src = msg;
          tupian.style.cssText =
            "width:15%;height:100px; display: inline-block;";
          var p1 = document.createElement("span");
          p1.innerText = pr;
          p1.style.cssText =
            "font-size:5px;font-weight:50px;margin:5px 3%; width:10px";
          var p2 = document.createElement("span");
          p2.innerText = na;
          p2.style.cssText =
            "font-size:5px;font-weight:50px; 10px; width:19%;margin-right:3%";
          var input = document.createElement("input");
          input.type = "checkbox";
          input.className = "input";
          input.name = "option";
          input.style.cssText = "margin-left:5px; width:5%";
          var number = document.createElement("span");
          number.innerText = "x1";
          number.style.cssText =
            "font-size:5%;font-weight:50px;margin-left:5%; width:9%";
          var xioaji = document.createElement("input");
          xioaji.type = "text";
          xioaji.id = "a1";
          xioaji.style.cssText =
            "margin-left:10%;width:10%;height:50px; outline-style: none; ";

          var butt = document.createElement("input");
          butt.type = "button";
          butt.className = "A";
          butt.value = "删除";

          butt.style.cssText =
            "margin-left:10%;width:10%;height:20px; background-color: #FF4B00;color:#fff; border:0 none;";
          var br = document.createElement("br");
          var ty = document.getElementById("status");

          ty.appendChild(input);
          ty.appendChild(tupian);
          ty.appendChild(p2);
          ty.appendChild(p1);
          ty.appendChild(number);
          // ty.appendChild(xioaji);

          ty.appendChild(butt);
          ty.appendChild(br);
        }
      },
      null
    );
  });
}

function count() {
  let check = document.querySelectorAll(".input");
  console.log(check);
}