Last post Oct 17, 2019 02:04 AM by Yang Shen
Member
75 Points
513 Posts
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>
Contributor
3140 Points
983 Posts
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">'
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.comfrom 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
Member
75 Points
513 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
Contributor
3140 Points
983 Posts
Re: create div as table
Oct 17, 2019 02:04 AM|Yang Shen|LINK
Hi zhyanadil,
This undefined was because in your code, you used
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 = "";
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:
Here's the result:
Best Regard,
Yang Shen