locked
create div as table RRS feed

  • Question

  • User-1634604574 posted

    i have this table created by div i want to append row which is give undefined from first row and from the second row the design will wrong

    .css-grid-table,
    .css-grid-table-header,
    .css-grid-table-body {
    display: grid;
    }
    
    .css-grid-table {
    grid-template-rows: 24px 72px;
    width: 80%;
    }
    
    .css-grid-table-header,
    .css-grid-table-body {
    grid-template-columns: auto auto auto minmax(150px, 25%);
    line-height: 24px; 
    }
    
    .css-grid-table-header {
    grid-column-gap: 2px;
    grid-template-rows: auto;
    }
    
    .css-grid-table-body {
    grid-template-rows: auto auto auto;
    }
    
    .css-grid-table-header div {
    text-align: center;
    font-weight: bold;
    background-color: rgb(191, 191, 191);
    }
    <script>
    
       $.get("/Purchase_Invoice/Purchase_Invoice_Detail_Pro_Purchase_Invoice_Item", {
                series: 'PINV-1'
            }, function (data) {
                var row;
                $.each(data, function (i, v) {
    
                   row  += '<div class="css-grid-table-body">'
                         +'<div style="font-size:10pt">' +  v.item_name  + '</div>'
                       +'<div  style="font-size:10pt">' +  v.qty +  '</div>'
                         +'<div  style="font-size:10pt">'  + v.rate  + '</div>'
                         +'<div  style="font-size:10pt">' +  v.amount +  '</div>'
                       //   +'<div  style="font-size:10pt">'  + v.discount_percentage  + '</div>'
                         // +'<div  style="font-size:10pt">' +  v.net_amount +  '</div>'
                    '</div>';
                });
                $(".table").append(row);
           
                })
    
    </script>
    html
       <div class="css-grid-table table">
            <div class="css-grid-table-header">
                <div>item</div>
                <div>qty</div>
                <div>amount</div>
                <div>discount_percentage</div>
                    @*<div>net amount</div>
                    <div>discount</div>*@
                </div>
        </div>
    Wednesday, October 16, 2019 11:59 AM

Answers

  • User-719153870 posted

    Hi zhyanadil,

    give undefined from first row

    This undefined was because in your code, you used

    var row;
                $.each(data, function (i, v) {
    
                   row  += '<div class="css-grid-table-body">'

    While in the first loop, you haven't set a value for your "var row".

    This can be fixed by initialize your row : var row = "";

    from the second row the design will wrong

    This i couldn't reproduce. Actually, after i added a textalign="center" to your table body, the stlye was working perfectly.

    Maybe you could press F12 and use the devtool to find out what's wrong.

    Below i will share my demo which works fine in my machine:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <style>
            .css-grid-table,
            .css-grid-table-header,
            .css-grid-table-body {
                display: grid;
            }
    
            .css-grid-table {
                grid-template-rows: 24px 72px;
                width: 80%;
            }
    
            .css-grid-table-header,
            .css-grid-table-body {
                grid-template-columns: auto auto auto minmax(150px, 25%);
                line-height: 24px;
            }
    
            .css-grid-table-header {
                grid-column-gap: 2px;
                grid-template-rows: auto;
            }
    
            .css-grid-table-body {
                grid-template-rows: auto auto auto;
                text-align:center;
            }
    
            .css-grid-table-header div {
                text-align: center;
                font-weight: bold;
                background-color: rgb(191, 191, 191);
            }
        </style>
        <script>
            $(function () {
                var row="";
                row += '<div class="css-grid-table-body">'
                    + '<div style="font-size:10pt">' + 1111 + '</div>'
                    + '<div  style="font-size:10pt">' + 2222 + '</div>'
                    + '<div  style="font-size:10pt">' + 3333 + '</div>'
                    + '<div  style="font-size:10pt">' + 4444 + '</div>'
                    +'</div>';
                $(".table").append(row);
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="css-grid-table table">
                <div class="css-grid-table-header">
                    <div>item</div>
                    <div>qty</div>
                    <div>amount</div>
                    <div>discount_percentage</div>
                </div>
            </div>
        </form>
    </body>
    </html>

    Here's the result:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 17, 2019 2:04 AM