JS对table的⼀些操作1.遍历整个table
function showtable(tableId) {
//获取table序号
var tab = ElementById(tableId);
//获取⾏数
var rows = ws;
//遍历⾏
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 = ElementById(tableId);
for (var i = 1; i < ws.length; i++) {
//指定遍历整个表的第3列
ws[i].cells[4].innerHTML);
}
}
3.删除table中所有的⾏，但不包括表头
function deleteCurrentRow(tableId) {
var tb = ElementById(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 ElementById(tabId);
//根据this获取⾏的下标
var i=r.wIndex;
//获取这⼀⾏中数量的列，并将数量加⼀
var ws[i].cells[4].innerText;
num=parseInt(num)+1;
//获取这⾏中单价的列，并算出结果更新⼩计的列js购物车结算代码
var ws[i].cells[3].innerText;
var total=parseInt(num) * parseInt(price);
}
function reduce(r,tabId){
var ElementById(tabId);
// var ws;
var i=r.wIndex;
var ws[i].cells[4].innerText;
if(parseInt(num)>0){
num=parseInt(num)-1;
}
var ws[i].cells[3].innerText;
var total=parseInt(num) * parseInt(price);
}
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">×</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 = ElementById(tableId);
var cart = ElementById(shoppingCart);
var allprice = 0;
for (var i = 1; i < ws.length; i++) {
//如果在菜单⾥，某个菜品的⼩计⼤于零。也就是该菜品被选中了
if (ws[i].cells[6].innerHTML) > 0) {
//alert(num);
//在购物车中插⼊⼀⾏
var tr = cart.insertRow(1);
//将菜单表⾥的第0、2、4、6列赋予给购物车的0、1、2、3列
tr.insertCell(0).innerHTML = ws[i].cells[0].innerHTML;
tr.insertCell(1).innerHTML =  ws[i].cells[2].innerHTML;
tr.insertCell(2).innerHTML = ws[i].cells[4].innerHTML;
tr.insertCell(3).innerHTML = ws[i].cells[6].innerHTML;
//计算总价并填写在购物车⾥
allprice = allprice + ws[i].cells[6].innerHTML);
}
}
}
3.前端调⽤部分：
onclick="deleteCurrentRow('shoppingCart');createShoppingCart('MenuTable','shoppingCart')"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。