JS 对table的一些操作

1.遍历整个table

function showtable(tableId) {
      //获取table序号
      var tab = document.getElementById(tableId);
      //获取行数
      var rows = tab.rows;
      //遍历行
      for(var i=1;i

2.遍历指定的列

无论是行、列。下标都是从0开始。

function showRow(tableId){
     var tab = document.getElementById(tableId);
       
    for (var i = 1; i < tab.rows.length; i++) {
        //指定遍历整个表的第3列
        alert(tab.rows[i].cells[4].innerHTML);
      }
}

3.删除table中所有的行，但不包括表头

function deleteCurrentRow(tableId) {
      var tb = document.getElementById(tableId);
      var rowNum = tb.rows.length;
      for (i = 1; i < rowNum; i++) {
        tb.deleteRow(i);
        rowNum = rowNum - 1;
        i = i - 1;
      }
    }

将循环中的i改为从0开始，则删除整个表的内容。

4.根据this属性获取当前行

描述：比如每行都有一个button，点中button后更新特定列的内容。

实际例子：在菜单里，点击加号或者减号更改选中的菜品的数量、价格小计

效果：

代码实现：

//在按钮的调用方法 onclick="add(this,'MenuTable')"
  function add(r,tabId){
      var tab=document.getElementById(tabId);  
       //根据this获取行的下标
      var i=r.parentNode.parentNode.rowIndex;
       //获取这一行中数量的列，并将数量加一
      var num=tab.rows[i].cells[4].innerText;
      num=parseInt(num)+1;
      //获取这行中单价的列，并算出结果更新小计的列
      var price=tab.rows[i].cells[3].innerText;
      var total=parseInt(num) * parseInt(price);

      tab.rows[i].cells[4].innerText=parseInt(num);
      tab.rows[i].cells[6].innerText=parseInt(total);

    }
    function reduce(r,tabId){
      var tab=document.getElementById(tabId);  
     // var tabRows=tab.rows;
      var i=r.parentNode.parentNode.rowIndex;
      var num=tab.rows[i].cells[4].innerText;
      if(parseInt(num)>0){
        num=parseInt(num)-1;
      }
  
      var price=tab.rows[i].cells[3].innerText;
      var total=parseInt(num) * parseInt(price);

      tab.rows[i].cells[4].innerText=parseInt(num);
      tab.rows[i].cells[6].innerText=parseInt(total);

    }

5.购物车的制作

描述：将选中的菜品添加到购物车，像是小票的形式呈现关键信息

逻辑：每次点开购物车按钮时（1）清空原有的购物车内容（2）插入本次选择的菜品

效果：

代码实现：

1.购物车前端的窗体制作（bootstrap）

  
 
   
 
    
 
     
 
      × 
      
订单
 
     
 
     
 
      
 
       
 
        
 
         
 
          
图片
 
          
菜名
 
          
数量
 
          
小计
 
         
 
        
 
        
 
       
 
       
 
       
 
         
       
 
       
 
        
 
                      
         
        
 
       
 
      
 
     
 
     
 
      关闭 
      下单 
     
 
    
 
     

2.更新购物车窗体信息：

 function createShoppingCart(tableId, shoppingCart) {
       //获取大的窗体，即菜单。以及小的窗体，即购物车
      var table = document.getElementById(tableId);
      var cart = document.getElementById(shoppingCart);

      var allprice = 0;
      for (var i = 1; i < table.rows.length; i++) {
        //如果在菜单里，某个菜品的小计大于零。也就是该菜品被选中了
        if (parseInt(table.rows[i].cells[6].innerHTML) > 0) {
          //alert(num);
           //在购物车中插入一行
          var tr = cart.insertRow(1);
            //将菜单表里的第0、2、4、6列赋予给购物车的0、1、2、3列
          tr.insertCell(0).innerHTML = table.rows[i].cells[0].innerHTML;
          tr.insertCell(1).innerHTML =  table.rows[i].cells[2].innerHTML;
          tr.insertCell(2).innerHTML = table.rows[i].cells[4].innerHTML;
          tr.insertCell(3).innerHTML = table.rows[i].cells[6].innerHTML;
            //计算总价并填写在购物车里
          allprice = allprice + parseInt(table.rows[i].cells[6].innerHTML);
        }
      }
      document.getElementById("allprice").innerHTML = "总计：" + allprice;

    }

3.前端调用部分：

onclick="deleteCurrentRow('shoppingCart');createShoppingCart('MenuTable','shoppingCart')"