[SOLUCIONADO] adicionar una variable rowCount dentro del name e id

[Shaco0492]

Buenas gente tengo un problema... talvez sea sencillo pero yo no tengo muchos conocimientos de javascript...
aqui les pongo el link de lo que tengo... lo encontre x ahi tanto buscar...

http://jsfiddle.net/QLQRT/

el codigo funciona perfecto...
el problema es que los ids que se generan no son exactamento lo que quiero...

lo que yo quiero es adicionar el contador que esta a la izquierda a los names e ids... el cual si se dan cuenta... si se desea eliminar una fila del medio pues el contador se resetea y enumera las filas de nuevo...

y esa enumeracion la quiero colocar dentro de los names e ids generados..
de manera que todo quede en orden...
osea:

1 fila name="name1" id="id1"
2 fila name="name2" id="id2"
3 fila name="name3" id="id3"

y asi sucesivamente...

para que en caso de que elimine una fila del medio pues quede

1 fila name="name1" id="id1"
2 fila name="name2" id="id2"

no quiero que quede asi:

1 fila name="name1" id="id1"
2 fila name="name3" id="id3"

si vieron el codigo funcionando veran que el contador se enumera correctamente...
el problema es en los names e ids...
trate de explicarme lo mejor que pude...
espero me puedan ayudar...
se agradece cualquier ayuda que me den... gracias...

[matake]

Hola,
seguro habrán soluciones mejores pero lo que se me ocurre a la primera vista seria algo asi:

1. añadir una clase a todas las filas ejemplo class="filas"

Código Javascript:

//reemplazar
var $tr = $(table).find("tbody tr:last").clone();
 
//por
var $tr = $(table).find("tbody tr:last").clone();
$tr.addClass('filas');
 

2. crear una funcion para reescribir los names e id-s despues de pulsar remove

Código Javascript:

funcion reescribir(){
    $.each($('.filas'),function(index){
        $(this).prop({
            id:'id'+index,
            name:'name'+index
        });
    });
}
 

3. llamar a la funcion reescribir después de borrar una fila

Código Javascript:

//cambiar
$(this).remove();
 
//por
$(this).remove();
reescribir();
 

Tenga en cuenta que no he probado lo que he puesto pero en principio debería funcionar

Espero que te sirva al menos como ideea

[Shaco0492]

Hola matake... mas o menos entendi lo que tratas de hacer...
Intenté aplicarlo pero no me funciono...

Seria de mucha ayuda si me ayudas con esto...
Llevo muchos dias buscando información...
Y pues necesito avanzar con este proyecto de la universidad...

Y como te dije... no se bien programar en javascript...
Solo entiendo lo básico...

[matake]

Pues seria esto:

Código Javascript:

$(document).ready(function ($) {
    // trigger event when button is clicked
    $("button.add").click(function () {
        // add new row to table using addTableRow function
        addTableRow($("table"));
        // prevent button redirecting to new page
        return false;
 
    });
 
    function cambiar_nombre_id(){
    
        //he puesto 300 milisegundos de retraso para estar seguro que la nueva fila esta en el DOM
        setTimeout(function(){
            //cuento todas las filas
            $.each($(table).find("tbody tr"),function(index){
                
            
                // get the name attribute for the input and select fields
                $(this).find("input,select").attr("name", function () {
                    // break the field name and it's number into two parts
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    // create a unique name for the new field by incrementing
                    // the number for the previous field by 1
                    
                    //aqui solo empleo la primera parte que es el nombre
                    //en vez de la segunda parte he puesto el index actual incrementando una unidad ya que empieza por 0
                    return parts[1] + (index+1);
                    
                    // repeat for id attributes
                }).attr("id", function () {
                    var parts = this.id.match(/(\D+)(\d+)$/);
                    return parts[1] +  (index+1);
                }); 
            });
        },300);
    }
    // function to add a new row to a table by cloning the last row and 
    // incrementing the name and id values by 1 to make them unique
    function addTableRow(table) {
        
        // clone the last row in the table
        var $tr = $(table).find("tbody tr:last").clone();
        
        //llamo a la funcion para cambiar nombres e id-s despues de añadir nueva fila
        cambiar_nombre_id();
 
 
        // append the new row to the table
        $(table).find("tbody tr:last").after($tr);
        $tr.hide().fadeIn('slow');
 
        // row count
        rowCount = 0;
        $("#table tr td:first-child").text(function () {
            return ++rowCount;
        });
 
        // remove rows
        $(".remove_button").on("click", function () {
            if ( $('#table tbody tr').length == 1) return;
            $(this).parents("tr").fadeOut('slow', function () {
                $(this).remove();
                //llamo a la funcion para cambiar nombres e id-s despues de borrar una fila
                cambiar_nombre_id();
                rowCount = 0;
                $("#table tr td:first-child").text(function () {
                    return ++rowCount;
                });
            });
        });
 
    };
});
 

Ahora ya esta probado ... como ya he dicho ... es algo rudimentario ... seguro habran formas mas elegantes de hacerlo pero funciona.

[Shaco0492]

Muchas gracias hermano... funciona perfectamente...
Ya podre seguir con mi proyecto... esto me estaba estancando x mucho tiempo...
Quedo muy agradecido...