JavaScript操作table表格:遍歷、列讀取、刪除行、更新列等動(dòng)態(tài)管理
本文詳細(xì)介紹使用JavaScript操作HTML表格的各種技巧,包括遍歷、指定列讀取、刪除行、根據(jù)按鈕更新特定列內(nèi)容,以及購(gòu)物車功能實(shí)現(xiàn),通過(guò)實(shí)例展示如何在網(wǎng)頁(yè)上動(dòng)態(tài)管理和更新表格數(shù)據(jù)
1.遍歷整個(gè)table
function showtable(tableId) {
//獲取table序號(hào)
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.遍歷指定的列
無(wú)論是行、列。下標(biāo)都是從0開始。
function showRow(tableId){
var tab = document.getElementById(tableId);
for (var i = 1; i < tab.rows.length; i++) {
//指定遍歷整個(gè)表的第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開始,則刪除整個(gè)表的內(nèi)容。
4.根據(jù)this屬性獲取當(dāng)前行
描述:比如每行都有一個(gè)button,點(diǎn)中button后更新特定列的內(nèi)容。
實(shí)際例子:在菜單里,點(diǎn)擊加號(hào)或者減號(hào)更改選中的菜品的數(shù)量、價(jià)格小計(jì)
效果:

代碼實(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à)的列,并算出結(jié)果更新小計(jì)的列
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.購(gòu)物車的制作
描述:將選中的菜品添加到購(gòu)物車,像是小票的形式呈現(xiàn)關(guān)鍵信息
邏輯:每次點(diǎn)開購(gòu)物車按鈕時(shí)(1)清空原有的購(gòu)物車內(nèi)容(2)插入本次選擇的菜品
效果:

代碼實(shí)現(xiàn):
1.購(gòu)物車前端的窗體制作(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">×</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>小計(jì)</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="請(qǐng)輸入收貨人電話" 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.更新購(gòu)物車窗體信息:
function createShoppingCart(tableId, shoppingCart) {
//獲取大的窗體,即菜單。以及小的窗體,即購(gòu)物車
var table = document.getElementById(tableId);
var cart = document.getElementById(shoppingCart);
var allprice = 0;
for (var i = 1; i < table.rows.length; i++) {
//如果在菜單里,某個(gè)菜品的小計(jì)大于零。也就是該菜品被選中了
if (parseInt(table.rows[i].cells[6].innerHTML) > 0) {
//alert(num);
//在購(gòu)物車中插入一行
var tr = cart.insertRow(1);
//將菜單表里的第0、2、4、6列賦予給購(gòu)物車的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;
//計(jì)算總價(jià)并填寫在購(gòu)物車?yán)?
allprice = allprice + parseInt(table.rows[i].cells[6].innerHTML);
}
}
document.getElementById("allprice").innerHTML = "總計(jì):" + allprice;
}3.前端調(diào)用部分:
onclick="deleteCurrentRow('shoppingCart');createShoppingCart('MenuTable','shoppingCart')"6.總結(jié)
到此這篇關(guān)于JavaScript操作HTML表格:遍歷、列讀取、刪除行、更新列等table的動(dòng)態(tài)管理的文章就介紹到這了,更多相關(guān)JavaScript操作table:遍歷、列讀取、刪除行、更新列等內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- JS組件Bootstrap Table使用方法詳解
- JS獲取Table中td值的方法
- JS動(dòng)態(tài)添加Table的TR,TD實(shí)現(xiàn)方法
- JavaScript獲取table中某一列的值的方法
- Sortable.js拖拽排序使用方法解析
- Js獲取table當(dāng)前tr行的值的代碼
- JS實(shí)現(xiàn)動(dòng)態(tài)生成html table表格的方法分析
- js操作table示例(個(gè)人心得)
- js實(shí)現(xiàn)table添加行tr、刪除行tr、清空行tr的簡(jiǎn)單實(shí)例
相關(guān)文章
使用JavaScript+HTML實(shí)現(xiàn)一個(gè)可交互的幸運(yùn)大轉(zhuǎn)盤
互動(dòng)元素在各類數(shù)字化應(yīng)用中都是提升用戶體驗(yàn)的重要手段,抽獎(jiǎng)轉(zhuǎn)盤作為一種經(jīng)典且富有吸引力的互動(dòng)形式,廣泛應(yīng)用于各種場(chǎng)景,本文將詳細(xì)介紹如何使用 HTML、CSS 和 JavaScript 來(lái)實(shí)現(xiàn)一個(gè)可交互的幸運(yùn)大轉(zhuǎn)盤,需要的朋友可以參考下2026-02-02
JavaScript?Promise錯(cuò)誤處理與最佳實(shí)踐
Promise是ES6異步編程解決方案,解決回調(diào)地獄問題,支持鏈?zhǔn)秸{(diào)用、統(tǒng)一錯(cuò)誤處理,是現(xiàn)代JavaScript異步處理的基石,本文給大家介紹JavaScript Promise錯(cuò)誤處理與最佳實(shí)踐,感興趣的朋友一起看看吧2025-09-09
JS創(chuàng)建或填充任意長(zhǎng)度數(shù)組的小技巧匯總
在JavaScript 中,我們往往會(huì)遇到需要使用某些默認(rèn)值來(lái)填充數(shù)組的情況,那么都有哪些方式可以完成這樣的任務(wù)呢?這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建或填充任意長(zhǎng)度數(shù)組的小技巧,需要的朋友可以參考下2021-10-10
微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-09-09
js實(shí)現(xiàn)ArrayList功能附實(shí)例代碼
ArrayList功能想必大家都有所了解吧,本文使用js實(shí)現(xiàn)ArrayList功能并附實(shí)例代碼,想學(xué)習(xí)的朋友可以看看2014-10-10

