CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
user4312749
user4312749

Reputation:

How to dynamically add row in Bootstrap

I have this piece of code that should do the following:

After typing into each input field and pressing the "Add row" button a new row should be added to the end of the table. Pressing the "Delete row" button should remove the last row created.

At this point, when I press any of the buttons, it won't do anything.

As a mention, when I am verifying Chromes' Console for any JS errors I get this:

Uncaught ReferenceError: $ is not defined

This is the HTML:

<body style="background-color:lavender">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            User
                        </th>
                        <th class="text-center">
                            Password
                        </th>
                        <th class="text-center">
                            IP
                        </th>
                        <th class="text-center">
                            Country
                        </th>
                        <th class="text-center">
                            IP disponibility
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='user0'  placeholder='User' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='pass0' placeholder='Password' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ip0' placeholder='IP' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='country0' placeholder='Country' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ipDisp0' placeholder='IP Details' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

And this is the JS:

    $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md'  /></td><td><input  name='pass"+i+"' type='text' placeholder='Password'  class='form-control input-md'></td><td><input  name='ip"+i+"' type='text' placeholder='IP'  class='form-control input-md'></td><td><input  name='country"+i+"' type='text' placeholder='Country'  class='form-control input-md'></td><td><input  name='ipDisp"+i+"' type='text' placeholder='IP details'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});

Any ideas on what should I change in my JS ?

Thanks

Upvotes: 1

Views: 39762

Answers (2)

martinezjc
martinezjc

Reputation: 3555

Remember jquery library must be placed first than bootstrap, maybe that would be your problem, your code is fine, here is the working fiddle using jquery 1.11.0 

<script src="jquery.min.js">
<script src="bootstrap.min.js">

The fiddle [1]: http://jsfiddle.net/gLrhnqo2/

Upvotes: 9

Ignacio Laborde
Ignacio Laborde

Reputation: 1462

You need add the Jquery script. If you select the latest version works good.

Upvotes: 0

Related Questions