On click table td input append same tr every time

Question

I have a problem in JavaScript to repeat a same tr after,when i click the td elements. Here the image My html code bellow:

<table id="tabl2" class="table time-table table-bordered table-striped budrow">
<thead>
    <tr>
        <th class="cal-head">Rates</th>
        <th class="cal-head">Start date</th>
        <th class="cal-head">End date</th>
    </tr>
</thead>
<tr>
    <td>
        <input type="number" readonly placeholder="Rates">
    </td>
    <td>
        <input type="text" readonly id="start" placeholder="Start date">
    </td>
    <td>
        <input type="text" class="datepicker" name="enddate" placeholder="End date">
    </td>
</tr>

I tried with this js but failed:

$('.budrow').click(function(){
   $(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>');
});

Please help me.

Please check this link http://stackoverflow.com/questions/171027/add-table-row-in-jquery — jaycyborg, May 04 '15 at 10:13

score 1 · Answer 1 · answered May 04 '15 at 10:07

Bind the click event to the clicked element, select the current row using closest() and then append the new row using after() function:

$('.btn').on('click', function() {
  var that = $(this);
  var newRow = '<tr><td colspan="3">This is a new row</td></tr>';
  that.closest('tr').after(newRow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <button class="btn">click</button>
      </td>
      <td>
        <button class="btn">click</button>
      </td>
      <td>
        <button class="btn">click</button>
      </td>
    </tr>
  </tbody>
</table>

score 1 · Answer 2 · answered May 04 '15 at 10:12

You can clone and add the new row, also it will be better to use a add button separately

<button class="budrow">Add</button>
<table id="tabl2" class="table time-table table-bordered table-striped budrow">
    <thead>
        <tr>
            <th class="cal-head">Rates</th>
            <th class="cal-head">Start date</th>
            <th class="cal-head">End date</th>
        </tr>
    </thead>
    <tr>
        <td>
            <input type="number" readonly placeholder="Rates" />
        </td>
        <td>
            <input type="text" readonly id="start" placeholder="Start date" />
        </td>
        <td>
            <input type="text" class="datepicker" name="enddate" placeholder="End date" />
        </td>
    </tr>
</table>

then

jQuery(function ($) {
    var $tr = $('#tabl2 tbody tr').eq(0);
    $('button.budrow').click(function () {
        var $clone = $tr.clone();
        $('#tabl2').append($clone);
        $clone.find('.datepicker').removeClass('hasDatepicker').datepicker();
    });
    $('.datepicker').datepicker();
});

Demo: Fiddle

Joy · Accepted Answer · 2015-05-04T11:16:17.253

1

Try to use:

var $table = $('#tabl2');
$table.click(function(e){
   var $tr = $(e.target).closest('tr');
   if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child"))
       $tr.after($tr.clone());
});

JSFiddle.

edited May 04 '15 at 11:16

answered May 04 '15 at 10:16

Joy

9,430
11
44
95

Thanks Shaojiang Cai ,,Its works ..but want the tr will append only when i click last tr td element..not every tr.. – Swaranan Singha Barman May 04 '15 at 10:53

score 0 · Answer 4 · answered May 04 '15 at 10:47

    $('.budrow tbody input').click(function(e){
        makeClone(e);
    });

    function makeClone(e){
        var newClone = $(e.target).closest("tr").clone();
        $("#tabl2 tbody").append(newClone);
        $(newClone).click(function(ev){
            makeClone(ev);
        })
    }

On click table td input append same tr every time

4 Answers4