2

tengo dos tablas y quiero insertar tabla 2 al final de tabla 1. Con jQuery es tan fácil que se me ocurrió la "buena idea" de intentar hacerlo con javascript.

Aqui el codigo de lo que hasta ahora he intentado:

$(document).ready(function (){

 // Version utilizando jQuery
 $("#jQuery").on("click", 
  function () {
   $("#lst1").find("tbody").append(
    $("#lst2").find("tbody").html()
   );
 });

 // Version utilizando JavaScript
 $("#jScript").on("click", 
  function () {
   document.querySelector("#lst1").querySelector("tbody").append(
    document.querySelector("#lst2").querySelector("tbody").innerHTML
   );
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
 <title>Lista de Entidades</title>
</head>
<body>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 1</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
   </tbody>
  </table>
 </div>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 2</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
    <tr>
     <td>00010</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00020</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00030</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00031</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00040</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00050</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00060</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00070</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00080</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00090</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00100</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00110</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00120</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00130</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00140</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00150</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
   </tbody>
  </table>
 </div>
 <button id="jQuery">Mezclar con jQuery</button>
 <button id="jScript">Mezclar con jScript</button>
</body>
</html>

2 respuestas 2

1

Una opción sería iterar sobre los nodos hijos del tbody y agregarlos con appendChild(). Para tener el mismo comportamiento que en jQuery tendrías que hacer un clonado en profundidad con cloneNode(true):

function () {
    var target = document.querySelector("#lst1 > tbody");
    var children = document.querySelector("#lst2 > tbody").children;
    for(i=0; i<children.length; ++i){
      target.appendChild(children.item(i).cloneNode(true));
    }
}

$(document).ready(function (){

 // Version utilizando jQuery
 $("#jQuery").on("click", 
  function () {
   $("#lst1").find("tbody").append(
    $("#lst2").find("tbody").html()
   );
 });

 // Version utilizando JavaScript
 $("#jScript").on("click", 
  function () {
    var target = document.querySelector("#lst1 > tbody");
    var children = document.querySelector("#lst2 > tbody").children;
    for(i=0; i<children.length; ++i){
      target.appendChild(children.item(i).cloneNode(true));
    }
    
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
 <title>Lista de Entidades</title>
</head>
<body>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst1" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 1</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
   </tbody>
  </table>
 </div>
 <div style="height:70px; overflow:scroll;" tabindex="1">
  <table id="lst2" width="100%" border="1" cellspacing="0" cellpadding="0">
   <thead>
    <tr>
     <th colspan="6">Tabla 2</th>
    </tr>
    <tr>
     <th>&nbsp;Codigo&nbsp;</th>
     <th>&nbsp;Nombre&nbsp;</th>
     <th>&nbsp;Documentos&nbsp;</th>
     <th>&nbsp;Saldo Bs.&nbsp;</th>
     <th>&nbsp;Direccion&nbsp;</th>
     <th>&nbsp;Telefonos&nbsp;</th>
    </tr>
   </thead>
   <tbody data-role="input-list">
    <tr>
     <td>00010</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00020</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00030</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00031</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00040</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00050</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00060</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00070</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00080</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00090</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00100</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00110</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00120</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00130</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00140</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
    <tr>
     <td>00150</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
     <td>&nbsp;</td>
    </tr>
   </tbody>
  </table>
 </div>
 <button id="jQuery">Mezclar con jQuery</button>
 <button id="jScript">Mezclar con jScript</button>
</body>
</html>

1

Con javascript puramente quedaria de esta forma

<script>
//Obtengo el botón que va hacer la operación
var btn = document.querySelector("#jScript");
//Asigno el evento onClick al botón
btn.addEventListener("click", function(){
    //Obtengo el tbody de la primera tabla
    var info1 = document.querySelector("#lst1").querySelector("tbody");
   //Obtengo el tbody de la segunda tabla
    var info2 = document.querySelector("#lst2").querySelector("tbody");
   //Itero sobre los hijos del tbody de la segunda tabla
    while(info2.firstChild){
        //Los voy insertando
        info1.append(info2.firstChild);
    }

});
</script>

Si no iterara sobre los hijos e hiciera lo que dice @alanfcm la estructura de tu primera tabla seria

<tbody>
 <!-- Aki van las filas viejas -->
 <tbody> <!-- tbody de la segunda tabla -->
    //Aki van las filas nuevas
2
  • @Dani..., gracias por tu respuesta pero... sabías que hay un botón que te permite copiar la pregunta a Respuesta, de esta forma podrás trabajar en el código publicado y luego éste pueda ser verificado.
    – fwBasic
    el 13 abr. 2018 a las 23:33
  • Upps no cual es??? el 16 abr. 2018 a las 11:56

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.