JS 对table的一些操作

1.遍历整个table

function showtable(tableId) {
      //获取table序号
      var tab = document.getElementById(tableId);
      //获取行数
      var rows = tab.rows;
      //遍历行
      for(var i=1;i<rows.length;i++){     
   //遍历表格列
       for(var j=0;j<rows[i].cells.length;j++)
           alert("第"+(i+1)+"行，第"+(j+1)+"列的值是:"+rows[i].cells[j].innerHTML);   
              
     }
    }

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）

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
   <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">订单</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="table-responsive"> 
       <table class="table table-striped" id="shoppingCart"> 
        <thead> 
         <tr> 
          <th>图片</th> 
          <th>菜名</th> 
          <th>数量</th> 
          <th>小计</th> 
         </tr> 
        </thead> 
        <tbody></tbody> 
       </table> 
       <h3 class="col-xs-9 text-right" id="allprice"></h3> 
       <div class="col-lg-6"> 
        <input class="form-control" required="required" placeholder="请输入收货人电话" name="phone" /> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <select class="form-control" required="required" id="place" name="place">             
        </select> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
      <button type="submit" class="btn btn-primary">下单</button> 
     </div> 
    </div> 
    <!-- /.modal-content --> 

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')"