Lo que hace el código es mostrar su información según la fila seleccionada. Lo que busco ahora es que se muestre desde la derecha (oculto) con una transición de unos segundos, para que no tenga ese efecto "tosco". No se me ocurre como hacerlo la verdad, he estado probando pero no me sale.
const productDetailsContainer = document.querySelector('.product-details-container');
const productDetails = document.querySelector('.product-details');
Array.from(document.querySelectorAll(".table-row")).forEach(row => {
row.addEventListener("click", e => {
const row_tr = e.target.parentNode
const first_td = Array.from(row_tr.children)[0].textContent; // td element
const second_td_text = Array.from(row_tr.children)[1].textContent;
const second_td_img_src = Array.from(row_tr.children)[1].children[0].src;
const details_div = document.createElement('div')
const newImg = document.createElement('img');
newImg.src = second_td_img_src;
const codigoProducto = document.createElement('div');
codigoProducto.classList.add("product-title")
codigoProducto.innerText = "From Codigo Producto: " + first_td
const nombre = document.createElement('p')
nombre.innerText = "This is my product: " + second_td_text
details_div.append(codigoProducto, nombre, newImg)
details_div.classList.add(`product-${first_td}`, 'details')
if (productDetails.children.length === 0) {
productDetails.classList.remove("hidden")
productDetails.appendChild(details_div)
} else {
productDetails.removeChild(productDetails.children[0])
productDetails.appendChild(details_div)
}
})
})
body {
display: flex;
padding: 10px;
}
.container{
margin: 0 20px;
}
.product-details {
display: flex;
align-items: center;
border: 1px solid black;
height: 100%;
width: 500px;
padding: 5px;
}
img {
width: 100%;
}
.hidden{
display: none;
}
.table-row {
cursor: pointer;
}
<body>
<div class="container">
<div class="table-container">
<table border="1">
<thead>
<tr>
<th>codigo producto</th>
<th>nombre</th>
<th>acciones</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>01</td>
<td>
guitarra acustica #1
<img class="hidden" src="https://upload.wikimedia.org/wikipedia/commons/4/4d/C.F._Martin_GRH_160_or_000-16RGT_cropped.png" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
<tr class="table-row">
<td>02</td>
<td>
Box of Milk
<img class="hidden" src="https://i.pinimg.com/736x/65/62/25/656225106a0f1fd5b12b5d299ac48721.jpg" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
<tr class="table-row">
<td>03</td>
<td>
guitarra acustica #3
<img class="hidden" src="https://m.media-amazon.com/images/I/71QWkR-IHEL._AC_SY879_.jpg" alt="">
</td>
<td>[eliminar] [editar]</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<div class="product-details-container">
<div class="product-details hidden">
</div>
</div>
<script src="code.js" charset="utf-8"></script>
</body>
Espero me puedan ayudar. Más o menos he probado con otro codigo, usando position: relative y modificando el left y luego agregando una transicion, pero he probado con el codigo actual y no me funciona. Así que bueno, ante todo gracias.