Erweitern der Funktionalität zum Klonen von Tabellenzeilen - Ändern der Zeilen-ID

Question

Ich habe dieses Fiddle unter: http://jsfiddle.net/radi8/EwQUW/33/

Beachten Sie, dass die anfänglich definierte Tabelle ist:

Wenn ich die erste Zeile klonen, muss ich die ID der neuen Zeile in etwas wie ändernwo die Zahl die neue ID der Zeile ist.Kann mir jemand erklären, wie ich das machen kann?

        SelectRow
        Email
        Ship Type

                Beide
                Über Straße          
                Über Schiene

                Beide
                Über Straße
                Über Schiene

            Zeile hinzufügen

         

            Aktualisieren

Answer 1

Vielleicht fehlt mir etwas, aber das sollte genauso einfach sein wie das Setzen des ID-Attributs:

var $clone = $("#template").clone();
var index = $("table.reference tr:not(.template)").length;
$clone.attr("id", "emlRow_" + index);

---

UPDATES

var count = $("table.reference tr").length;

$("#Add").click(function() {
    count++;
    var $clone = $("#secondaryEmails tbody tr:first").clone();
    $clone.attr({
        id: "emlRow_" + count,
        name: "emlRow_" + count,
        style: "" // "display:none" entfernen
    });
    $clone.find("input,select").each(function(){
        $(this).attr({
            id: $(this).attr("id") + count,
            name: $(this).attr("name") + count
        });
    });
    $("#secondaryEmails tbody").append($clone);
});

Arbeitsbeispiel: http://jsfiddle.net/hunter/EwQUW/35/

Answer 2

Du kannst diesen js Code ausprobieren.

Szenario: - Ich hatte das Szenario, eine Tabelle innerhalb eines div zu klonen und auch den Klon beim Klicken auf den Link zum Entfernen des Klons zu entfernen.

    var count=1;
    function makeClone()
    {
    var $clone = $(".cloneTable:first").clone(true);

    $clone.find(':text,:file').each(function() {
            $(this).attr('id',($(this).attr("id")+count));
            $(this).val(' ');
        });
         $clone.find("a").each(function() {
              $(this).val('').attr('id', function(_, id) {
                return count;
              });
            });
         $clone.find("span").each(function() {
             $(this).attr({
                id: $(this).attr("id") + count
         });
        });
             $clone.attr( 'id', function() { 

                  return this.id + count; });
      //für die Verwendung des Datepickers
      $clone.find('.myDate').removeClass('hasDatepicker').datepicker();

    $clone.appendTo('#addCarrierDiv');
    $('#Test'+count).html('<strong>Test '+(parseInt(count)+parseInt(1))+'</strong>');

    count=count+1;
}

Hier aktualisiere ich meine Antwort, um den Code zum Entfernen eines Klons bereitzustellen.

$(document).ready(function(){

$('.removeClone').live('click',function() {

        var length=$('.cloneTable').length;
        if(length==1)
            {
            alert('Es sollte mindestens ein Klon vorhanden sein');
            return false;
            }

        var id = $(this).attr('id');
        var countVal=parseInt(id)+parseInt(1);
        $(this).closest('.cloneTable').remove();
         for(var removecount=parseInt(countVal);removecount<=length;removecount++)
            {
             $clone=jQuery("#maintable"+removecount);
             if(removecount==1)
                 {
                 $clone.find(':text,:file').each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal);

                    });

                 $clone.find("a").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal+id);

                    });

                 $clone.find("span").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr({
                         id: testVal
                     });
                         $(this).html('Test '+removecount+'');
                    });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal);
                      });
                 id=parseInt(id)+parseInt(1);
            }  

             else
                 {
                $clone.find(':text,:file').each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });
                $clone.find("a").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });

                $clone.find("span").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');

                    $(this).attr({
                     id: testVal+id
                 });
                     $(this).html('Test '+removecount+'');
                });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal+id);
                      });
                 id=parseInt(id)+parseInt(1);
                 }
            } 
         count=parseInt(count)-parseInt(1);
    });
});

Dies funktioniert gut für mich. Hoffentlich kann Ihnen dieser Code helfen.