读书人

js操作多重报表

发布时间: 2013-12-26 00:35:35 作者: rapoo

js操作多重表格

<html>

<style>
.list{height:20px; border:1px solid gray; border-bottom:0px;? }
.list tr td{ border-bottom:1px solid gray; padding: 5px 5px 5px 5px; }
</style>??? ?

<body>

? <div>
??? ??? ??? <table readonly="readonly" style ="width:60px;" value="'+prodAttrId+'" /></td>';
??? ??? ??? ??? ??? ??????? c5Html += '<td>'+stockNum+'</td>';
??? ??? ??? ??? ??? ??????? c5Html += '<td>'+salePrice+'</td>';
??? ??? ??? ??? ??? ??????? c5Html += '<td><input id="buyNum" style ="width:60px;" name="buyNum_'+storeId+'" value="'+buyNum+'" onkeyup="buyNumChange(this); "/></td>';
??? ??? ??? ??? ??? ???????
??? ??? ??? ??? ??? ??????? c5Html += '<td>'+totalPrice+'</td>';
??? ??? ??? ??? ??? ??????? c5Html += '<td><a href="#" onClick="deleteRow(this)" >删除</a></td>';
??? ??? ??? ??? ??? ???????
??? ??? ??? ??? ??? ??????? var _trLast = _body.insertRow();
??? ??? ??? ??? ??? ??????? _trLast.id = prodId;
??? ??? ??? ??? ??? ??????? _trLast.innerHTML = c5Html;
??? ??? ??? ??? ??? ???????
??? ??? ??? ??? ??? ??????? var _ptr4? = t.rows[storeIdIndex].cells[3];? // 第4列
??? ??? ??? ??? ??? ??????? var oldStoreTotalPrice = _ptr4.innerHTML;
??? ??? ??? ??? ??? ??????? var StoreTotalPrice =? parseInt(oldStoreTotalPrice) + totalPrice;
??? ??? ??? ??? ??? ??????? _ptr4.innerHTML = StoreTotalPrice;
??? ??? ??? ??? ??? ??? }
??? ??? ??? }else {? // 没有这个商户的情况
??? ??? ??? ??????? var r = t.insertRow();
??? ??? ??? ??????? r.id = storeId;??? //设置行的id
??? ??? ??? ??????? var c1 = r.insertCell();??? // 商户名称

??????????????????? c1.innerHTML = storeName;
??? ??? ??? ??????? var c2 = r.insertCell();
??? ??? ??? ??????? var c3 = r.insertCell();
??? ??? ??? ??????? var c4 = r.insertCell(); //商户订单合计
??? ??? ??? ??????? c4.innerHTML = 0;
??? ??? ??? ???????
??? ??? ??? ??????? var c5 = r.insertCell();???? //在第5列构建里面的table
??? ??? ??? ??????? var c5Html = '<table? type="text" style ="width:60px;" value="'+prodAttrId+'"? /></td>';
??? ??? ??? ??????? c5Html += '<td>'+stockNum+'</td>';
??? ??? ??? ??????? c5Html += '<td>'+salePrice+'</td>';
??? ??? ??? ??????? console.log(buyNum);
??? ??? ??? ??????? c5Html += '<td><input style ="width:60px;" id="buyNum" name="buyNum_'+storeId+'" value="'+buyNum+'" onkeyup="buyNumChange(this); "/></td>';
??? ??? ??? ???????
??? ??? ??? ??????? var totalPrice = salePrice * buyNum;
??? ??? ??? ??????? c4.innerHTML = totalPrice;
??? ??? ??? ???????
??? ??? ??? ??????? c5Html += '<td>'+totalPrice+'</td>';
??? ??? ??? ??????? c5Html += '<td><a href="#" onClick="deleteRow(this)" >删除</a></td> </tr>';
??? ??? ??? ??????? c5Html += '</table>';
??? ??? ??? ??????? c5.innerHTML=c5Html;
??? ??? ??? }
??? ??? }

??????? //执行上面的删除操作

??? ??? function deleteRow(obj){
??? ??? ??? var _tr=obj.parentNode.parentNode; // 得到tr对象
??? ??? ??? var _trIndex=_tr.rowIndex; //?
??? ??? ???
??? ???   var _td6 = _tr.childNodes[5];
??? ??? ??? var oldTotalPrice = _td6.innerHTML;
??? ??? ???
??? ??? ??? var _tbody = _tr.parentNode;
??? ??? ??? _tbody.deleteRow(_trIndex);??
??? ??? ???
??? ??? ??? var _pTr = _tbody.parentNode.parentNode.parentNode;
??? ??? ??? var _rowsLength = _tbody.rows.length;
??? ??? ??? if (_rowsLength==1){? // 已经删除了所以的商品
??? ??? ??? ??? _pTr.parentNode.removeChild(_pTr);
??? ??? ??? }
??? ??? ??? ?//
??? ??? ??? ?var _pTd4 = _pTr.childNodes[3];
??? ??? ??? ?var storeTotalPrice = _pTd4.innerHTML;
??? ??? ??? ?var storeTotalPriceInt = parseInt(storeTotalPrice);
??? ??? ??? ?storeTotalPriceInt = storeTotalPriceInt - parseInt(oldTotalPrice);
??? ??? ??? ?_pTd4.innerHTML = storeTotalPriceInt;
??? ??? }

?

??? ??? //修改数量
??????? function buyNumChange(obj){
??????? ??? ??? var buyNum = obj.value;
??????? ??? ??? var _tr=obj.parentNode.parentNode; // 得到tr对象
??????? ??? ???
?????? ??? ??? ? ??? var rowIndex=_tr.rowIndex; //?
?????? ??? ??? ? ??? var CellIndex=obj.parentNode.cellIndex;
??????? ??? ??? ?
?????? ??? ??? ? ??? var _td6 = _tr.childNodes[5];
??????? ??? ??? var salePrice = _td6.innerHTML;
??????? ??? ??? var totalPrice = parseInt(salePrice) * buyNum;
??????? ??? ???
?????? ??? ???? var _td8 = _tr.childNodes[7];
??????? ??? ??? var oldTotalPrice = _td8.innerHTML;
??????? ??? ??? _td8.innerHTML = totalPrice;? //总价
??????? ??? ???
??????? ??? ??? ?//
??????? ??? ??? ?var? _tbody = _tr.parentNode;
??????? ??? ??? ?var _pTr = _tbody.parentNode.parentNode.parentNode;
??????? ??? ??? ?var _pTd4 = _pTr.childNodes[3];
??????? ??? ??? ?
??????? ??? ??? ?var storeTotalPrice = _pTd4.innerHTML;
??????? ??? ???
??????? ??? ??? ?var storeTotalPriceInt = parseInt(storeTotalPrice);
??????? ??? ??? ?storeTotalPriceInt = storeTotalPriceInt - parseInt(oldTotalPrice);
??????? ??? ??? ?storeTotalPriceInt = storeTotalPriceInt + totalPrice;
??????? ??? ????
??????? ??? ??? ?_pTd4.innerHTML = storeTotalPriceInt;
??????? }

?

?????? //遍历 table表格的值,提交到后台

??????? function formSubmit() {
??????? ??? //遍历 table表格????
??????????? var _prodListTable=document.getElementById("prodListTable");? //获取Table
?????????????
??????????? var _array = new Array();
??????????? for(var i=0;i<_prodListTable.rows.length;i++){?
??????????? ??? var _pjson = new Object();
??????????? ??? var _prows = _prodListTable.rows[i];
??????????? ??? _pjson.storeId = _prows.id;
??????????? ??? _pjson.storeName = _prows.cells[0].innerHTML;
??????????? ??? _pjson.storeOrderState = _prows.cells[1].innerHTML;
??????????? ??? _pjson.wuliuNo = _prows.cells[2].innerHTML;
??????????? ??? _pjson.storeOrderTotal =_prows.cells[3].innerHTML;
??????????? ???
??????????? ??? var _array2 = new Array();
??????????? ??? var _table = _prows.cells[4].childNodes[0]; // 得到商品的列表 _table??
??????????? ??
??????????? ??? for(var j=1;j<_table.rows.length;j++){??? // 注意这个地方要去除首行的值
??????????? ??? ??? var _cjson = new Object();
??????????? ??? ??? _cjson.prodId = _table.rows[j].cells[0].innerHTML;
??????????? ??? ??? _cjson.prodName = _table.rows[j].cells[1].innerHTML;
??????????? ??? ??? _cjson.prodAttrStringList = _table.rows[j].cells[2].innerHTML;
??????????? ??? ??? _cjson.prodAttrId = _table.rows[j].cells[3].childNodes[0].value;
??????????? ??? ??? _cjson.stockNum = _table.rows[j].cells[4].innerHTML;
??????????? ??? ??? _cjson.salePrice = _table.rows[j].cells[5].innerHTML;
??????????? ??? ??? _cjson.buyNum = _table.rows[j].cells[6].childNodes[0].value;
??????????? ??? ??? _cjson.totalPrice = _table.rows[j].cells[7].innerHTML;
??????????????? ??? _array2.push(_cjson);
??????????? ??? }
??????????? ??? _pjson.prodList = _array2;
??????????? ??? _array.push(_pjson);
??????????? }?
???????
??????? ??? if(_array==null || _array.length ==0 ){
??????? ??? ?? ? alert(content:'请添加商品信息!' );
????????????? ??? return false;
??????? ??? }
??????? ??? //JSON.stringify 将JSON转为字符串格式 , JSON.parse(string)将字符串转为JSON格式;
??????? ??? document.getElementById('prodDetailList').value = JSON.stringify(_array);
??????????? document.getElementById("form1").submit();
??????? }

读书人网 >JavaScript

热点推荐