1

Tengo el siguiente código, que su función básica debería de ser el de insertar una nueva fila una vez se le clické en un botón.

function addTable(selft){
			  var index=selft.parentElement.parentElement.rowIndex;
			  var t=document.getElementById("InsertAqui");
			  console.log(t);
			  var tr=document.createElement("tr");
			  var td1=document.createElement("td");
			  var td2=document.createElement("td");
			  var td3=document.createElement("td");
			  var td4=document.createElement("td");

			  var t1=document.createTextNode("A");
			  var t2=document.createTextNode("B");
			  var t3=document.createTextNode("C");
			  td2.appendChild(t1);
			  td3.appendChild(t2);
			  td4.appendChild(t3);
			  td1.innerHTML='<button type="button" class="addTable" onclick="addTable(this)">r</button>';
			  tr.appendChild(td1);
			  tr.appendChild(td2);
			  tr.appendChild(td3);
			  tr.appendChild(td4);
			  console.log(tr);
			  t.insertRow(tr,index);
			}
table{
			  border-collapse: collapse;
			}
			tr{
			  border:1px solid #000;
			}
			td{
			  border:1px solid #000;
			}
<table id="InsertAqui">
		  <thead>
		    <tr>
		      <th>T1</th>
		      <th>T2</th>
		      <th>T3</th>
		      <th>T4</th>
		    </tr>  
		  </thead>
		  <tbody >
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		  </tbody>
		</table>

En la siguiente foto podremos apreciar que efectivamente el tr se crea de manera correcta, pero por alguna razón la localiza en el thead de la tabla y peor aun no contiene nada:

introducir la descripción de la imagen aquí

No sé como solucionar el problema solo con javascript.

1 respuesta 1

2

El problema es que estás creando la fila con document.createElement() y deberías usar tabla.appendChild(), pero, si usas tabla.insertRow() se crea la fila en la posición especificada y solo vas agregando columnas:

function addTable(selft){
			  var index=selft.parentElement.parentElement.rowIndex;
			  var t=document.getElementById("InsertAqui");
			  // Al insertar la fila automáticamente se crea <tr />
			  var tr=t.insertRow(index);
			  var td1=document.createElement("td");
			  var td2=document.createElement("td");
			  var td3=document.createElement("td");
			  var td4=document.createElement("td");

			  var t1=document.createTextNode("A");
			  var t2=document.createTextNode("B");
			  var t3=document.createTextNode("C");
			  td2.appendChild(t1);
			  td3.appendChild(t2);
			  td4.appendChild(t3);
			  td1.innerHTML='<button type="button" class="addTable" onclick="addTable(this)">r</button>';
			  tr.appendChild(td1);
			  tr.appendChild(td2);
			  tr.appendChild(td3);
			  tr.appendChild(td4);
			  console.log(tr);
			}
table{
			  border-collapse: collapse;
			}
			tr{
			  border:1px solid #000;
			}
			td{
			  border:1px solid #000;
			}
<table id="InsertAqui">
		  <thead>
		    <tr>
		      <th>T1</th>
		      <th>T2</th>
		      <th>T3</th>
		      <th>T4</th>
		    </tr>  
		  </thead>
		  <tbody >
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		    <tr>
		      <td><button type="button" class="addTable" onclick="addTable(this)">r</button></td>
		      <td>a</td>
		      <td>b</td>
		      <td>c</td>
		    </tr>
		  </tbody>
		</table>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.