kajal kajal - 3 years ago 163
jQuery Question

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>




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download