locked
how to increase table by button click RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1634604574 posted

    i wrote this code i want to increase row b button click but this one is not working fine

    <html>
<head>

    @*<script src="/Print_Format/GetJavascriptFile"></script>*@


    <script src="~/Scripts/jquery-1.10.2.min.js"></script>


    <link href="~/CSS/codemirror.css" rel="stylesheet" />
    <script src="~/Scripts/codemirror.js"></script>
    <script src="~/jj/javascript.js"></script>
    <script src="~/CSS/css.js"></script>
    <link href="~/Theme/neat.css" rel="stylesheet" />
    <link href="~/Hint/show-hint.css" rel="stylesheet" />
    <script src="~/Hint/css-hint.js"></script>
    <script src="~/Hint/show-hint.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: left;
        }

        .css-grid-table-header div {
            text-align: left;
            font-weight: bold;
            background-color: rgb(191, 191, 191);
        }
    </style>
    </head>
<body>

    <div class="css-grid-table table" id="table">
        <div class="css-grid-table-header">
            <div>item</div>
            <div>qty</div>
            <div>amount</div>
            <div>discount_percentage</div>
        </div>

        <div class="css-grid-table-body" id="css-grid-table-body">          
        </div>

    </div>

    <input type="button" id="add_row1" value="add">

    </body>
</html>
    <script>


    $('#add_row1').click(function (event) {
        var row = document.getElementById("css-grid-table-body");
        var row1 = row.cloneNode(true);
        var box = document.getElementById("table");
       // box.append(row1);


           $.get("/Purchase_Invoice/Purchase_Invoice_Detail_Pro_Purchase_Invoice_Item", {
            series: 'PINV-1'
        }, function (data) {
            $.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>';
            });
            box.append(row1)
       
            })
    })
    </script>

    Wednesday, October 16, 2019 5:23 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    i wrote this code i want to increase row b button click but this one is not working fine

    "not working fine" is not specific enough to understand what is not working fine.  Below is a basic working example.

    <body>
    <div>
        <div class="css-grid-table table" id="table">
            <div class="css-grid-table-header">
                <div>item</div>
                <div>qty</div>
                <div>amount</div>
                <div>discount_percentage</div>
            </div>
        </div>
        <input type="button" id="add_row1" value="add">
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $('#add_row1').click(function (event) {
            $.get("/JsDemos/Purchase_Invoice_Detail_Pro_Purchase_Invoice_Item", {
                series: 'PINV-1'
            }, function (data) {                  
                $.each(data, function (index, value) {
                   let row = '<div class="css-grid-table-body">'
                        + '<div style="font-size:10pt">' + value.item_name + '</div>'
                        + '<div  style="font-size:10pt">' + value.qty + '</div>'
                        + '<div  style="font-size:10pt">' + value.rate + '</div>'
                        + '<div  style="font-size:10pt">' + value.amount + '</div>'
                    '</div>';
                    $("#table").append(row);
                });
            });
        });
    </script>
</body>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 16, 2019 6:16 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    i wrote this code i want to increase row b button click but this one is not working fine

    "not working fine" is not specific enough to understand what is not working fine.  Below is a basic working example.

    <body>
    <div>
        <div class="css-grid-table table" id="table">
            <div class="css-grid-table-header">
                <div>item</div>
                <div>qty</div>
                <div>amount</div>
                <div>discount_percentage</div>
            </div>
        </div>
        <input type="button" id="add_row1" value="add">
    </div>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $('#add_row1').click(function (event) {
            $.get("/JsDemos/Purchase_Invoice_Detail_Pro_Purchase_Invoice_Item", {
                series: 'PINV-1'
            }, function (data) {                  
                $.each(data, function (index, value) {
                   let row = '<div class="css-grid-table-body">'
                        + '<div style="font-size:10pt">' + value.item_name + '</div>'
                        + '<div  style="font-size:10pt">' + value.qty + '</div>'
                        + '<div  style="font-size:10pt">' + value.rate + '</div>'
                        + '<div  style="font-size:10pt">' + value.amount + '</div>'
                    '</div>';
                    $("#table").append(row);
                });
            });
        });
    </script>
</body>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 16, 2019 6:16 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1634604574 posted

    if i create width header increase depend on each td tbody how can do it?

    Wednesday, October 16, 2019 7:46 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    zhyanadil.it@gmail.com

    if i create width header increase depend on each td tbody how can do it?

    Use standard CSS.

    Wednesday, October 16, 2019 8:08 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1634604574 posted

    how can i use it?can you giv example

    Wednesday, October 16, 2019 8:16 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User475983607 posted

    how can i use it?can you giv example

    If you are trying to add CSS dynamically then use the standard jQuery addClass() and removeClass() functions.   If you are trying to do somehting else then you'll need to clarify.

    Wednesday, October 16, 2019 9:13 PM