jqueryhtml-tablejquery-clone

Clone Link on Column To Another Column in Table


I want create td and link image after td:nth-child(2) and clone link a.link_topic_title

I have make this script, but the link only clone link on first row

$(document).ready(function () {
    $('#preview_active').change(function () {
        if ($(this).is(':checked')) {
            var url_thread = $('.link_topic_title').attr("href");
            var url_tooltip = "http://example.com" + url_thread
            $(".zebra thead tr th:first-child").attr('colspan', 4);
            $('.zebra tbody tr td:nth-child(2)').after('<td class="span1 icon"><a href="' + url_thread + '"><img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Preview-icon.png" height="30px" width="25px" rel="tooltip" data-original-title="' + url_tooltip + '"/></a></td>');
            $('.zebra tbody tr td:nth-child(3) a img[rel=tooltip]').tooltip();
        } else {
            $(".zebra thead tr th:first-child").attr('colspan', 3);
            $('.zebra tbody tr td:nth-child(3)').remove();
        }
    });
});

jsfiddle : http://jsfiddle.net/5Vpra/2/

How do I clone list link on column to another column (create td)?

Update

I have tried using each, I managed to pick up all the links, but not successfully cloned to each td,

$(document).ready(function () {
    $('#preview_active').change(function () {
        if ($(this).is(':checked')) {

            classes = {};
               $('.link_topic_title').each(function() {
               $($(this).attr("href").split(' ')).each(function() { 
               if (this !== '') {
                 classes[this] = this;
                }    
                });
               });

            tds = '';
            $(".zebra thead tr th:first-child").attr('colspan', 4);
            $('.zebra tbody tr td:nth-child(2)').after('<td class="span1 icon"></td>');

            for (class_name in classes) {
             var url_tooltip = "http://example.com" + class_name
             tds += $('.zebra tbody tr td:nth-child(3)').append('<a href="' + class_name + '"><img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Preview-icon.png" height="30px" width="25px" rel="tooltip" data-original-title="' + url_tooltip + '"/></a>');
                 $('.zebra tbody tr td:nth-child(3) a img[rel=tooltip]').tooltip();
          };
        } else {
            $(".zebra thead tr th:first-child").attr('colspan', 3);
            $('.zebra tbody tr td:nth-child(3)').remove();
        }
    });
});

jsfiddle : http://jsfiddle.net/5Vpra/3/


Solution

  • Solved

    I have tried add index on for loop for identifier of tr.

    $(document).ready(function () {
        $('#preview_active').change(function () {
            if ($(this).is(':checked')) {
    
                var classes = {};
                   $('.link_topic_title').each(function() {
                   $($(this).attr("href").split(' ')).each(function() { 
                   if (this !== '') {
                     classes[this] = this;
                    }    
                    });
                   });
    
                tds = '';
                $(".zebra thead tr th:first-child").attr('colspan', 4);
                $('.zebra tbody tr td:nth-child(2)').after('<td class="span1 icon"></td>');
                var i = 0;
                for (class_name in classes) {
                 i = i+1;
                 var url_tooltip = "http://domain.com" + class_name
                 tds +=  $('.zebra tbody tr:nth-child(' + i + ') td:nth-child(3)').append('<a href="' + class_name + '"><img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Preview-icon.png" height="30px" width="25px" rel="tooltip" data-original-title="' + url_tooltip + '"/></a>');
                     $('.zebra tbody tr td:nth-child(3) a img[rel=tooltip]').tooltip();
              };
            } else {
                $(".zebra thead tr th:first-child").attr('colspan', 3);
                $('.zebra tbody tr td:nth-child(3)').remove();
            }
        });
    });
    

    $('.zebra tbody tr:nth-child(' + i + ') td:nth-child(3)') result :

    $('.zebra tbody tr:nth-child(1) td:nth-child(3)')

    $('.zebra tbody tr:nth-child(2) td:nth-child(3)')

    ..

    ..

    jsfiddle : http://jsfiddle.net/5Vpra/4/