2014-11-11 6 views
0

Я пытаюсь создать небольшой скрипт js, который заменит значение td на клонированное значение.jQuery заменить div на clone

Я сделал скрипку, чтобы быть более ясным.

Я хочу нажать кнопку «Больше» на столе, а затем заменить «Больше» на клонированный div «123». И я хочу, чтобы Меньше быть последним td последнего tr, но я буду смотреть на это позже.

jQuery(document).ready(function($) { 

    $('table').each(function(){ 
    var $table = $(this); 
    var n = $(this).find("tr:nth-child(4) td:visible").length; 
    var c = $(this).find('tr:nth-child(3)').last().find('td:last').clone(); 
    $(this).find('tr:nth-child(3)').last().find('td:last').html(
     "<a href='javascript:void(0)' class='more-countries-big'>More</a>" 
    ); 
    var x = $("<a href='javascript:void(0)' class='more-countries-big'>More</a>"); 
    x.on('click', function(){ 
     $table.find('tr:nth-child(3)').last().find('td:last').html(c.html()); 
    }); 
    }); 
    $("table").each(function(){ 
    var $tr = $(this).find('tr'); 
    $tr.hide(); 
    $tr.eq(0).show(); 
    $tr.eq(1).show(); 
    $tr.eq(2).show(); 
    }); 

    $('a.more-countries-big').on('click',function(){ 
     var txt = $(".open-continents").is(':visible') ? 'More' : 'Less'; 
     $(this).parents('table').find('tbody tr').toggleClass('open-continents'); 
     $(this).parents('table').find('a.more-countries-big').text(txt); 
    }); 

}); 

Fiddle Example

Спасибо

+0

Будут ли все цифры одинаковыми для данной таблицы? Если нет, то откуда вы знаете, что такое клонированное значение? – FirstLegion

+0

вы никогда не использовали 'n' в любом месте, а также не использовали' $ 'для своих переменных. во всяком случае, ваш вопрос не слишком чист для меня. сколько раз вы хотите клонировать, и что? – vaso123

+0

Я сменил скрипку http://jsfiddle.net/3yfbb3kw/ ... Я хочу, когда я нажимаю «Больше» из первой таблицы, чтобы заменить ее на 123l ... не меньше. Когда я нажимаю кнопку второго стола More, чтобы заменить Less на 123z. Надеюсь, это станет более ясным. Спасибо –

ответ

0

Ваше решение здесь: Вы можете использовать так:

$('a.more-countries-big').on('click',function(){ 
     if($(this).hasClass('less')) { 
      $(this).removeClass("less"); 
      $(this).text("More"); 
      $(this).parents("table").find("tr:last").remove(); 
     } else { 
      var tds = $(this).parents("table").find("tr:last").html(); 
      $(this).parents("table").append("<tr>"+tds+"</tr>"); 
      $(this).addClass("less"); 
      $(this).text("Less"); 
     } 
    }) 

если вы хотите добавить еще столбец использовать другую ссылку и уважаемое событие ,

Смежные вопросы