weixin_41325924
weixin_41325924
采纳率54.5%
2018-11-30 05:45

js动态把文本框输入的的内容生成表格

5
已采纳

像这两张图显示的一样,先在多个中input选择数据,然后再把input选择的数据生成表格
图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • qq_40021323 妖王令剑 3年前

    图片说明

    直接把数据传给后台 , 后台处理就是了, 自己转成json数据也可以; 但是想转成下面表格展示的数据类型会有点复杂, 后台转会更容易一下; 表格展示的数据格式需要跟后台商量好; 希望可以帮到你.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style type="text/css">td{width: 50px;text-align: center;}</style>
        </head>
        <body>
            <table id="table" border="1"></table>
        </body>
        <script type="text/javascript">
            window.onload = function(){
                var arr = [10,20,30];
                var arr1 = ["A","B"];
                var arr2 = ["S","M","L"];
                var data = []; // 发给后台的
                var data1 = [];  // 界面显示的表格数据
                for (var i = 0; i < arr.length; i++ ) {
    
                    for (var x = 0; x < arr1.length; x++) {
                        for (var y = 0; y < arr2.length; y++) {
                            dataItem = [];
                            if( x==0 && y==0 ){
                                dataItem.push({
                                    rowspan: arr1.length * arr2.length,
                                    title: arr[i]
                                })
                            }
                            if( y==0){
                                dataItem.push({
                                    rowspan: arr2.length,
                                    title: arr1[x]
                                })
                            }
                            dataItem.push({
                                rowspan: 1,
                                title: arr2[y]
                            })
                            var obj = {
                                concentration: arr[i],
                                size: arr1[x],
                                capacity: arr2[y]
                            };
                            data1.push(dataItem);
                            data.push(obj);
                        }
                    }
                }
                console.log(data);
                console.log(data1);
                var table = "";
                for (var index = 0; index < data1.length; index++ ) {
                    var item = data1[index];
                    var tr = "<tr>";
                    for (var s = 0; s < item.length; s++ ) {
                        tr += "<td rowspan='" + item[s].rowspan + "'>" + item[s].title + "</td>";
                    }
                    tr += "<td>库存</td><td>积分</td><td>总量</td>"
                    tr += "</tr>"
                    table += tr; 
                }
                console.log(table);
                document.getElementById("table").innerHTML = table;
            }
        </script>
    </html>
    
    
    点赞 评论 复制链接分享
  • Lei_Da_Gou Lei_Da_Gou 3年前

    图片说明
    动态生成表格。先用尝试用java代码生成一行一行的数据。然后用js代码生成前端table的一行一行的的tr标签

    点赞 评论 复制链接分享
  • weixin_41325924 weixin_41325924 3年前

    图片说明这个是图2

    点赞 评论 复制链接分享

相关推荐