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> Codigo </th>
<th> Nombre </th>
<th> Documentos </th>
<th> Saldo Bs. </th>
<th> Direccion </th>
<th> Telefonos </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> Codigo </th>
<th> Nombre </th>
<th> Documentos </th>
<th> Saldo Bs. </th>
<th> Direccion </th>
<th> Telefonos </th>
</tr>
</thead>
<tbody data-role="input-list">
<tr>
<td>00010</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00020</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00030</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00031</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00040</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00050</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00060</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00070</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00080</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00090</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00100</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00110</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00120</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00130</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00140</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>00150</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<button id="jQuery">Mezclar con jQuery</button>
<button id="jScript">Mezclar con jScript</button>
</body>
</html>