create div as table [Answered]RSS

1 reply

Last post Oct 17, 2019 02:04 AM by Yang Shen

‹ Previous Thread|Next Thread ›

Shortcuts

zhyanadil.it...

Member

68 Points

409 Posts

create div as table

Oct 16, 2019 11:59 AM|zhyanadil.it@gmail.com|LINK

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>

Yang Shen

Contributor

2860 Points

910 Posts

Re: create div as table

Oct 17, 2019 02:04 AM|Yang Shen|LINK

Hi zhyanadil,

zhyanadil.it@gmail.com
give undefined from first row

This undefined was because in your code, you used

zhyanadil.it@gmail.com

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 = "";

zhyanadil.it@gmail.com
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

‹ Previous Thread|Next Thread ›