快捷導(dǎo)航

JavaScript操作table表格：遍歷、列讀取、刪除行、更新列等動態(tài)管理

更新時間：2025年05月17日 09:35:51 作者：明明#030

本文詳細(xì)介紹使用JavaScript操作HTML表格的各種技巧,包括遍歷、指定列讀取、刪除行、根據(jù)按鈕更新特定列內(nèi)容,以及購物車功能實現(xiàn),通過實例展示如何在網(wǎng)頁上動態(tài)管理和更新表格數(shù)據(jù)

1.遍歷整個table

function showtable(tableId) {
      //獲取table序號
      var tab = document.getElementById(tableId);
      //獲取行數(shù)
      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.遍歷指定的列

無論是行、列。下標(biāo)都是從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;
      }
    }

將循環(huán)中的i改為從0開始，則刪除整個表的內(nèi)容。

4.根據(jù)this屬性獲取當(dāng)前行

描述：比如每行都有一個button，點中button后更新特定列的內(nèi)容。

實際例子：在菜單里，點擊加號或者減號更改選中的菜品的數(shù)量、價格小計

效果：

代碼實現(xiàn)：

//在按鈕的調(diào)用方法 onclick="add(this,'MenuTable')"
  function add(r,tabId){
      var tab=document.getElementById(tabId);  
       //根據(jù)this獲取行的下標(biāo)
      var i=r.parentNode.parentNode.rowIndex;
       //獲取這一行中數(shù)量的列，并將數(shù)量加一
      var num=tab.rows[i].cells[4].innerText;
      num=parseInt(num)+1;
      //獲取這行中單價的列，并算出結(jié)果更新小計的列
      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.購物車的制作

描述：將選中的菜品添加到購物車，像是小票的形式呈現(xiàn)關(guān)鍵信息

邏輯：每次點開購物車按鈕時（1）清空原有的購物車內(nèi)容（2）插入本次選擇的菜品

效果：

代碼實現(xiàn)：

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>數(shù)量</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">關(guān)閉</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;
            //計算總價并填寫在購物車?yán)?
          allprice = allprice + parseInt(table.rows[i].cells[6].innerHTML);
        }
      }
      document.getElementById("allprice").innerHTML = "總計：" + allprice;

    }

3.前端調(diào)用部分：

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

6.總結(jié)

到此這篇關(guān)于JavaScript操作HTML表格：遍歷、列讀取、刪除行、更新列等table的動態(tài)管理的文章就介紹到這了,更多相關(guān)JavaScript操作table：遍歷、列讀取、刪除行、更新列等內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: