Generar filas de una tabla con Javascript

[SPLICER]

Buenas, soy nuevo en el foro así que seré breve:

Tengo una pequeña/gran duda con respecto a la generacion de tablas a travez de javascript.

Estoy intentando crear una tabla en donde el usuario va a ingresar los datos de varios participantes de un proyecto, el problema es que no se cuantos participantes son, porque varia con respecto a cada proyecto. ya tengo el codigo java script que genera las filas con los datos, pero no se como genera cada input con nombres (name="") diferentes.
Para que al enviarlos al php este pueda capturar cada valor por separado.

A continuacion les dejo el codigo que llevo.

Código Javascript:

function creartabla(){
 
    var tr = document.createElement("tr"),
        td1 = document.createElement("td"),
        td2 = document.createElement("td"),
        td3 = document.createElement("td"),
        td4 = document.createElement("td"),
        i1 = document.createElement("input"),
        i2 = document.createElement("input"),
        i3 = document.createElement("input"),
        i4 = document.createElement("input"),
        padre = document.getElementById("tabla1");
 
    i1.setAttribute("class", "form-control");
    i2.setAttribute("class", "form-control");
    i3.setAttribute("class", "form-control");
    i4.setAttribute("class", "form-control");
 
    i1.setAttribute("type", "text");
    i2.setAttribute("type", "text");
    i3.setAttribute("type", "text");
    i4.setAttribute("type", "text");
 
    td1.setAttribute("class", "col-sm-3");
    td2.setAttribute("class", "col-sm-3");
    td3.setAttribute("class", "col-sm-3");
    td4.setAttribute("class", "col-sm-3");
 
    td1.appendChild(i1);
    td2.appendChild(i2);
    td3.appendChild(i3);
    td4.appendChild(i4);
 
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    tr.appendChild(td4);
    
    padre.appendChild(tr);
 
}
 

Código HTML:

<table class="table table-striped table-bordered">
                                                            
<tbody id="tabla1">
 
<tr>
 
<td class="col-sm-3">Nombre</td>
 
<td class="col-sm-3">Cedula</td>
 
<td class="col-sm-3">Telefono</td>
 
<td class="col-sm-3">Profesion</td>
 
</tr>
 
<tr>
 
<td class="col-sm-3"><input class="form-control" type="text"></td>
 
<td class="col-sm-3"><input class="form-control" type="text"></td>
 
<td class="col-sm-3"><input class="form-control" type="text"></td>
 
<td class="col-sm-3"><input class="form-control" type="text"></td>
                                                                </tr>
 
</tbody>
                                                        
</table>
 

Estoy usando Bootstrap por cierto, por eso las clases.

Antes que nada les agradezco la ayuda. :D

[Alexis88]

Bienvenido a Foros del Web.

Cuando tengas que crear a varios elementos similares, es mejor utilizar una estructura cíclica, como la estructura while o for; y para no complicarte con los nombres de las cajas de texto, puedes utilizar un nombre para formar un arreglo de elementos:

Código HTML:

<input type="text" name="ejemplo[0]" />
<input type="text" name="ejemplo[1]" />
<input type="text" name="ejemplo[2]" />
<input type="text" name="ejemplo[3]" />
 

Para lo cual puedes utilizar el valor de la variable contadora (en un bucle), o una variable que lleve la cuenta de las cajas de texto creadas (si las fueras a añadir una por una):

Código Javascript:

//En un bucle
for (var i = 0; i < total; i++){
    var input = document.createElement("input");
    input.name = "ejemplo[" + i + "]";
}
 
//Una por una
var i = 0;
function crear(){
    var input = document.createElement("input");
    input.name = "ejemplo[" + i + "]";
    i++; //Aquí se incrementa el valor de la variable para el siguiente elemento
}
 

Un saludo