Дубликат строки в моей таблице

0

У меня проблема с дублированием строки в моей таблице.

Я хочу дублировать следующую строку таблицы:

<table class="table table-bordered table-striped">
  <tr>
    <th>Service</th>
    <th>Début</th>
    <th>Fin</th>
    <th>État</th>
    <th>&nbsp;</th>
  </tr>
  <tr class="tr_clone">
    <td>&nbsp;</td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p><a href="#" class="tr_clone_add">Ajouter une ligne</a></p>

С помощью этого кода Js:

$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

Но это не работает.

Не могли бы вы помочь мне в этом деле?

Благодарю.

Теги:

2 ответа

1
Лучший ответ

Использовать это

  $(function(){
$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').find('.tr_clone').first();
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});
});

Вам не нужно

 var $tr    = $('table').closest('.tr_clone');

EDit: если вы хотите добавить повторяющуюся строку в каждую таблицу, попробуйте это

     $(function(){
    $(".tr_clone_add").live('click', function() {
        $('table').each(function(i,v){
        var $tr    = $(this).find('.tr_clone').first();
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
        })

    });
    });
Поделиться
  • 0
    Нет. :( Не работают. У меня 3 таблицы. Это проблематично?
  • 0
    Я создал здесь проверить это jsfiddle.net/ZNvY7
Показать ещё 7 комментариев
0 

$(function () {
        // Add Row
        $('#table-data').on('click', ".tr_clone_add", function (e) {
            var cloned = $('#table-data tr:last').clone();
            e.preventDefault();
            cloned.clone().appendTo('#table-data');
        });
        // Del Row
        $('#table-data').on('click', ".tr_clone_del", function (e) {
            e.preventDefault();
            $(this).closest('tr').remove();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="table-data" class="table table-hover table-bordered">
    <tbody>
        <tr>
            <td><b>TUTORS</b></td>
        </tr>            
        <tr class="tr_clone">
            <td>
                <div class="col-md-6">
                    colum1
                </div>
                <div class="col-md-6">
                    colum2
                    <input type="button" class="btn btn-primary btn-xs tr_clone_add" name="add" value="Add" />
                    <input type="button" class="btn btn-danger btn-xs tr_clone_del"  name="del" value="Del" />
                </div>
            </td>
        </tr>        
    </tbody>
</table>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню