CODEWITHSUNDEEP
javascriptjquery
kajal
kajal

Reputation: 33

Create child table when a button is clicked

I'm trying to build a table that can be dynamically edited with HTML and Javascript.

I have a button in a row of a parent table and I want to create a child table inside the parent table when a button is clicked. But my jquery is not called on click.

Class name is .childtbl.

Edit

I have create button colume propmotional title in every row. button is clickable only on first row and also I can create table row but in second row i am not able to crete table onlcick of button! I dont know why function is not call.You can see my code in snippet

$(document).ready(function(){
    var i =0;
    $(".addmore").on('click', function () {
      // alert("ks");
        var count = $('#form_table')[0].rows.length;
        alert(count);
        var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
        data += "<td><input class='form-control' type='text' name='wname[]'/></td><td><button type=\"button\" id='newtrbtn' class='btn btn-success childtbl'>+ add new Title</button></td></tr>";
        $('#form_table').append(data);
        i++;
    });
    $(".childtbl").on('click', function () {

        alert("come from second");
        var count1 = $('#form_table1')[0].rows.length;
        alert(count1);
        var data1 = "<tr class='case1'><td><span id='snum1" + count1 + "'>" + count1 + ".</span></td>";
        data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
        $('#form_table1').append(data1);
        i++;
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='test'  method="post">
    <label class="label"> <strong> Warishan Names <strong> </label>
    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>Promotional Header</th>
                <th>promotional Titile</th>
            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' name='wname[]'/></td>
                <td><button type="button" class='btn btn-success childtbl'>+ add new Title</button> <br>
                    <table id="form_table1" class="table table-bordered">
                        <tr class='case1'>
<!--                       

         <td><span id='snum1'>1.</span></td>-->
    <!--                            <td><input class="form-control" type='text' name='wr[]'/></td>-->
                            </tr>
                        </table>
                    </td> </tr>
            </table>
            <button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>

Upvotes: 0

Views: 1485

Answers (2)

aurelienshz
aurelienshz

Reputation: 337

Got it working. Several points :

  • Your event listener shouldn't try to listen to dynamically added content (see this question), see line 8 in the JS part of this snippet
  • You were trying to retrieve the child table by its id (var count1 = $('#form_table1')[0].rows.length; and $('#form_table1').append(data1);). You have to dynamically find the row in which the button that was clicked is located, which you can achieve thanks to the value of this inside jQuery event listeners, see line 9

$(document).ready(function(){
    $(".addmore").on('click', function () {
        var count = $('#form_table')[0].rows.length;
        var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
        data += "<td><input class='form-control' type='text' name='wname[]'/></td><td><button type=\"button\" id='newtrbtn' class='btn btn-success childtbl'>+ add new Title</button><table class='table table-bordered'></table></td></tr>";
        $('#form_table').append(data);
    });
    $('form#test').on('click', '.childtbl', function () {
        var $titlesTable = $(this).next('table')[0];
        var titlesCount = $titlesTable.rows.length + 1;
        var data1 = "<tr class='case1'><td><span id='snum1" + titlesCount + "'>" + titlesCount + ".</span></td>";
        data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
        $($titlesTable).append(data1);
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='test' method="post">
    <label class="label"> <strong> Warishan Names <strong> </label>
    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>S. No</th>
                <th>Promotional Header</th>
                <th>promotional Titile</th>
            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' name='wname[]'/></td>
                <td><button type="button" class='btn btn-success childtbl'>+ add new Title</button>
                    <table class="table table-bordered"></table>
                </td>
            </tr>
          </table>
          <button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>

Upvotes: 0

A. Iglesias
A. Iglesias

Reputation: 2675

The problem is the way your're creating the click events. They're created when the DOM loads and associated to current buttons, but when you create a button dinamically, that events are not associated to it.

To solve it, you can use delegated events. Use the on() function for an outer element (that is always going to exists, in your case the table@form_table, for example), and create the click events associating to the buttons inside. So change this...

$(".childtbl").on('click', function () {

... by this...

$('table#form_table').on('click','button.childtbl',function(e) {

... so the event would work for preexisting buttons or the dinamically generated. And $(this) inside of the new on function will still be associated to the button (not the table).

I hope it helps

Upvotes: 1

Related Questions