Adding a row to a table dynamically using jQuery

Question

I have this table and I want to be able to add rows to it dynamically using Jquery but I'm falling so far, I already have a loop in place for the added rows, I just need the script that goes with it. (I'm using a MVC pattern design)

My code for the loop :

<?php
     $viewTableRows = array_merge($device->tableRows, array(new tableRow()));
     foreach ($viewTableRows as $i => $row) { 
  ?>

an example of a td:

<td>
       <?php echo $htmlRenderer->getProperHtmlForInputText(
           SheetTableOperator::SHEET_POSITION .  "[$i]",
           $row->position);
       ?>
</td>

an Image of my table

mx0 · Accepted Answer · 2017-05-15 01:58:57Z

1

Method 1

var currentEletd;

$('table').append("<tr class='tr'></tr>").after(
    function() {
        var ele = $('.tr', this);
        currentEletd = (ele[ele.length - 1]);
});

$(currentEleth).append(("<td>" + [your value] + "</td>"));

Method 2

mytbody=$("<tbody></tbody>");
mytr = $("<tr></tr>");
mytr.append("<td></td>");

$('table').append(mytbody);

edited May 15, 2017 at 1:58

mx0

7,26812 gold badges57 silver badges57 bronze badges

answered May 11, 2017 at 9:23

rojanssth

341 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noureddine Brahmi Over a year ago

I like your first method , but my table is quiet complicated , i have more than 10 tds and in each td a big load of information , so I'm afraid this won't be possible or my code will be really messy.

rojanssth Over a year ago

use loop to generate td

Jigar · Accepted Answer · 2017-05-26 03:55:29Z

1

Use this code to add data dynamically.

        <button id='mybtn'>Add row</button>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

<script  type="text/javascript">
           $(document).on("click",'#mybtn',function(){  

                 var $mytable = $('#table').find("tbody");

                  $last_row = $mytable.find("tr:last");

                  $new_row = $last_row.clone();

                  $last_row.after($new_row);

           });    


</script>

edited May 26, 2017 at 3:55

answered May 11, 2017 at 9:02

Jigar

3,2833 gold badges36 silver badges55 bronze badges

10 Comments

Noureddine Brahmi Over a year ago

Yes , but how I can implement it in my case ? using my loop

Jigar Over a year ago

@NoureddineBrahmi there is a different event in jquery you can add dynamically in any row or column.

Jigar Over a year ago

@NoureddineBrahmi if you still have a doubt please add your code in jsfiddle I will help you out from this.

Noureddine Brahmi Over a year ago

This is my jsfiddle link and thanks a lot for your help !

Jigar Over a year ago

@NoureddineBrahmi check my answer I updated it also you can check js fiddle link

|

Collectives™ on Stack Overflow

Adding a row to a table dynamically using jQuery

2 Answers 2

2 Comments

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

10 Comments

Related