`
xiamw2000
  • 浏览: 1188 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

js操作多重表格

12 
阅读更多

<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 class="list">
                <thead>
                    <tr>
                        <td>商户名称</td>
                        <td>商户订单状态</td>
                        <td>物流单号</td>
                        <td>商户订单合计</td>
                    </tr>
                </thead>
                <tbody id="prodListTable" class="list">
                </tbody>
            </table>
        </div>

 </body>

</html>

 

 function showProd(storeId,storeName,prodId,prodName,salePrice,buyNum,stockNum, prodAttrId,prodAttrStringList){

            console.log("storeId=="+storeId);
             console.log("storeName=="+storeName);
             console.log("prodId=="+prodId);
             console.log("prodName=="+prodName);
             console.log("salePrice=="+salePrice);
             console.log("buyNum=="+buyNum);
             console.log("stockNum=="+stockNum);
             console.log("prodAttrId=="+prodAttrId);
             prodAttrStringList = prodAttrStringList.replace(/null/g,''); 
          
             var t=document.getElementById("prodListTable");  //获取Table
            var storeIdFlag = 0;
            var storeIdIndex =0;
            var length= t.rows.length;          //获得Table下的行数
            if(length!=0){              //  如果已经有商户了，就循环判断有没有相同的商户
                for(var i=0;i<length;i++) 
                { 
                    var _tr = t.rows[i];
                    var _pIdValue = _tr.id;
                    if (storeId == _pIdValue){  //判断有没有这个商户  第一层table里面判断
                        storeIdFlag =1;
                        storeIdIndex = i;
                        break;
                    }
                }
        }

 

       if (storeIdFlag==1){ // 表示已经有这个商户了
                        // 得到商品的列表tbody
                       var _body = t.rows[storeIdIndex].cells[4].childNodes[0].childNodes[0];  // 第5列
                       
                        //判断商品是否存在
                        var prodIdFlag = 0;
                        var prodIdIndex =0;
                        var length= _body.rows.length;          //获得Table下的行数
                        if(length!=0){              //
                            for(var i=0;i<length;i++) 
                            { 
                                var prodIdOld = _body.rows[i].id;
                                var prodAttrIdOld = _body.rows[i].cells[3].childNodes[0].value;
                            
                                if (prodIdOld == prodId  && prodAttrIdOld==prodAttrId){  //这个地方是通过2个列值来判断是否有相同的行
                                    prodIdFlag =1;
                                    prodIdIndex = i;
                                    break;
                                }
                            }
                        }
                       
                        if (prodIdFlag ==1){   // 如果已经有这个商品了  todo
                               alert('如果已经有该属性商品了!');
                               return false;
                        }else  { 
                            var totalPrice = salePrice * buyNum;
                            var c5Html = '';
                            c5Html += '<td>'+prodId+'</td>';
                            c5Html += '<td>'+prodName+'</td>';
                            c5Html += '<td>'+prodAttrStringList+'</td>';
                            c5Html += '<td><input type="text" 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  class="list">';
                    c5Html += '<tr><td  >商品ID</td>';
                    c5Html += '<td >商品详细名称</td>';
                    c5Html += '<td  >商品属性</td>';
                    c5Html += '<td >商品属性ID</td>';
                    c5Html += '<td  >库存数量</td>';
                    c5Html += '<td  >单价</td>';
                    c5Html += '<td  >数量</td>';
                    c5Html += '<td   >总价</td>';
                    c5Html += '<td  >操作</td></tr>';
                   
                    c5Html += '<tr id="'+prodId+'"><td>'+prodId+'</td>';
                    c5Html += '<td>'+prodName+'</td>';
                    c5Html += '<td>'+prodAttrStringList+'</td>';
                    c5Html += '<td><input readonly="readonly" 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; // 得到ｔｒ对象
            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; // 得到ｔｒ对象
               
                　    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();
        }

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    GridView多重表头设计

    在实际的数据呈现场景中，有时我们需要创建复杂的布局，比如包含多重表头的表格，以更好地组织和分类信息。多重表头设计能帮助用户理解数据结构，使数据呈现更加清晰有序。 在"GridView多重表头设计"这个主题中，...

    手写table 表格排序，固定列拖拉。 固定表头

    表格用法：$("#tableFixId).tableFixId({ tableParentDiv: $("#tableFixId"), //大容器 leftNum: 1, rightNum: 1, fixHead: "csFixed", footTable: 1, exparams: "input" })

    javascript 表格内容排序 简单操作示例代码

    在JavaScript中，对数组进行排序是一种常见的操作。数组排序可以基于数组中元素的某个属性来进行。在本文中，我们主要关注如何根据表格内容进行排序。表格内容通常由对象数组表示，每个对象代表一行数据，并包含多个...

    Ext表格列锁定+多表头插件

    这样，用户无需不断滚动整个表格就能查看和操作重要的列数据。在Ext3.4中，通过将BufferView添加到LockingGridView中，实现了高效的数据渲染。BufferView是一种优化策略，它只在可视区域内渲染一部分数据，以提高...

    jQuery表格模糊搜索代码.zip

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。本资源“jQuery表格模糊搜索代码.zip”提供了一种高效的方法，用于在表格数据中实现快速、模糊的搜索功能，这对于...

    一个用于生成多层复杂表头的jquery插件可以进行表头和数据的动态生成

    jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得开发更加便捷。 该插件的核心功能在于动态生成多层表头和数据。在传统的HTML表格中，表头通常是静态的，而这个插件通过...

    multifact-pivottable:PivotTable.js 的 JavaScript 插件。 它同时呈现多个聚合，并添加了用于呈现漂亮表格的配置 http

    PivotTable.js 的多重聚合 PivotTable.js 的 JavaScript 插件。 它同时呈现多个聚合，并添加了用于呈现漂亮表格的配置 Multifact-pivottable 是的 JavaScript 插件。 它同时呈现多个聚合以及基于表达式的动态聚合 ...

    ext 4.1 多重表头gridheader

    在EXT JS 4.1框架中，GridHeader是用于创建复杂和可定制表格视图的重要组件。这个功能允许开发者在网格中实现多层次的表头，从而更好地组织和展示数据。多重表头通常用于呈现具有多维度信息的数据，例如在财务报表...

    GridView表格的各种使用技巧

    - 对于复杂的表格结构，可以实现多重表头的合并，增强数据的层次感。 14. **突出显示特定单元格** - 根据条件判断，可以动态改变单元格的样式，例如，当金额低于一定值或分数不及格时。 15. **自动求和求平均值...

    JS笛卡尔积算法与多重数组笛卡尔积实现方法示例

    JavaScript中的笛卡尔积算法是一种将多个数组的所有可能的元素组合成新的数组的计算方法。它在数据处理、组合分析和算法设计中具有广泛的应用。在本文中，我们将深入探讨两种JavaScript实现笛卡尔积的方法。 首先，...

    thymeleaf实现th:each双重多重嵌套功能

    在本示例中，我们将探讨如何使用Thymeleaf的`th:each`指令来实现HTML模板中的双重或多重嵌套循环，以便动态加载一二级文章分类。Thymeleaf是一个强大的服务器端模板引擎，常用于Spring Boot项目，用于生成动态HTML...

    Js实现动态添加删除Table行示例

    在介绍Js实现动态添加和删除表格行（Table Row）的知识点之前，先要了解HTML中的表格（Table）结构以及JavaScript基础操作。HTML中的表格主要由`&lt;table&gt;`标签构成，并包含`&lt;tr&gt;`标签表示的行（Row）和`&lt;td&gt;`标签表示...

    Ext 3.4 多表头 列锁定

    Ext 3.4是一款基于JavaScript的富客户端框架，主要用于构建复杂的Web应用程序，它包含一个强大的组件库，其中包括表格视图（GridView）。在这个特定的场景中，我们关注的是"多表头"和"列锁定"功能，这两者都是Ext JS...

    基于JS实现的笛卡尔乘积之商品发布

    在本文中，我们将探讨如何利用JavaScript实现商品发布的笛卡尔乘积功能，这在电商网站上尤其常见，如京东的商品详细页。笛卡尔积算法是一种在数学中用来计算两个集合所有可能配对的方法，而在编程中，它常用于组合...

    GridView的19种操作(删除,编辑,添加等)

    6. **鼠标移到某一行改变背景色方法一**：通过CSS和JavaScript实现，当鼠标悬停在某行时改变其背景色。 7. **鼠标移到某一行改变背景色方法二**：另一种实现方式，可能使用了服务器端事件，如`GridView1_...

    ExtJs6 导出excel（包含分组、分组合计行、二重表头）

    在IT行业中，ExtJS是一个广泛使用的JavaScript库，用于构建企业级的富客户端应用程序。ExtJS6是该框架的一个版本，提供了丰富的组件和功能，其中包括数据网格（Grid）组件，能够展示大量的数据并进行复杂的操作。在...

    jQuery动态生成不规则表格(前后端)

    这种表格通常称为不规则表格，因为它的行合并不遵循常规的单一或多重列标准。 #### 二、数据预处理 要实现前端的不规则表格，后端需要对数据进行预处理。将从数据库中查询到的列表数据（例如`List&lt;Activity&gt;`）转换...

    js基础数组笔记.docx

    ### JavaScript 基础数组知识点总结 ...以上就是关于JavaScript基础数组的相关知识点总结，包括数组的定义、初始化、基本操作、迭代方法等内容。掌握这些基础知识对于理解和使用JavaScript是非常重要的。

    OPIMD:老年人多重剥夺指数的交互式计算器。 对于丹·埃克塞特（Dan Exeter）

    在这个计算器中，用户可能可以通过选择不同的参数，如地理位置、特定的社会经济指标，来查看特定地区的老年人多重剥夺指数。 OPIMD计算器的实现可能涉及到以下HTML相关知识点： 1. **表单元素**：为了收集用户输入...

    jquery基础教程高清版PDF.part5.rar

    第7章　表格操作　 　7.1　排序　 　7.1.1　服务器端排序　 　7.1.2　JavaScript排序　 　7.2　分页　 　7.2.1　服务器端分页　 　7.2.2　JavaScript　分页　 　7.3　完成的代码　 　7.4　高级行条纹效果　 　7.4.1...

Magicbox
Global site tag (gtag.js) - Google Analytics