0

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>
Maciej Jureczko
  • 1,560
  • 6
  • 19
  • 23
kajal
  • 33
  • 1
  • 10
  • Not exactly sure what's wrong with your code. Can you give a bit more details about the expected behaviour, and what actually happens ? – aurelienshz Oct 02 '17 at 06:41
  • As a side note, you actually don't need to add `1` to all your variable names in the second callback function you define. `var` declarations are function-scoped so the two functions' inner variables won't overlap. – aurelienshz Oct 02 '17 at 06:44
  • I have create button coloum promotional title in every row. button is clickable and also I can create table row but only on first row! In second row i am not able to crete table onclick of button! I don't know why function is not call.You can see my code in snippet. @aurelienshz – kajal Oct 02 '17 at 06:57

2 Answers2

1

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

A. Iglesias
  • 2,625
  • 2
  • 8
  • 23
  • Thank you very much !Its work for me . But one more issue is when i click button of second row ! my text field is creating in first row instead of second row. – kajal Oct 02 '17 at 07:19
  • That's a different problem. You're selecting your pre-created `table#form_table1` that only exists in that first line. To create the new child table, I would get the current button `td` just with `$(this).closest('td')` and would create the whole new table in a variable and add it with `$(this).closest('td').append(myChildTableVar)` – A. Iglesias Oct 02 '17 at 07:32
0

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>
aurelienshz
  • 337
  • 2
  • 9