mostar contenido de una fila HTML en un div

[jmm87]

hola buen dia comunidad. Les presento mi problemita y ojala me me puedan ayudar.

tengo una tabla HTML

Código HTML:

<table class="table table-striped">
            <thead>
                <tr>
                    <th>Descripcion</th>
                    <th>Familia</th>
                    <th>Marca</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <!--Contenido de la base de datos-->
            <tbody>
                <tr>
                    <td>Televisor Smart 32"</td>
                    <td>Televisores</td>
                    <td>Hitachi</td>
                    <td>4575</td>
                    <td><button type="button" class="btn btn-default" aria-label="Left Align">x</button></td>
                </tr>
                <tr class="seleccionado">
                    <td>Heladera 1600</td>
                    <td>Heladeras</td>
                    <td>Bambi</td>
                    <td>5670</td>
                    <td><button type="button" class="btn btn-default" aria-label="Left Align">x</button></td>
                </tr>
                <tr>
                    <td>Microondas 23l grill</td>
                    <td>Microondas</td>
                    <td>tcl</td>
                    <td>2241</td>
                    <td><button type="button" class="btn btn-default" aria-label="Left Align">x</button></td>
                </tr>
                <tr>
                    <td>Tablet 7"</td>
                    <td>Computadoras</td>
                    <td>Kanji</td>
                    <td>1250</td>
                    <td><button type="button" class="btn btn-default" aria-label="Left Align">x</button></td>
                </tr>
                <tr>
                    <td>Ropero tana 2p 3j</td>
                    <td>Roperos 2 puertas</td>
                    <td>Ricchezze</td>
                    <td>1870</td>
                    <td><button type="button" class="btn btn-default" aria-label="Left Align">x</button></td>
                </tr>                                       
            </tbody>
            <!--Fin Contenido de la base de datos-->
        </table>
        <button type="button" class="btn btn-default btn-xs" id="mostrarResult">Mostrar todo</button>
    <legend>Vista Previa:</legend>
        <div id="vistaPrevia">
        Probandooooooooooo
        </div>
 

y mi codigo javascript:

Código Javascript:

$(document).ready(function(){
    //Tabla
    $('tbody tr').click(function(){ 
        var descripcion;
        descripcion=$('tbody tr td')[0].innerText;
        $('#vistaPrevia').replaceWith(descripcion);
    });
 
 
$('#mostrarResult').button().click(function(){
        $('tbody tr').show();
    });
 
 
});
 

quiero q al hacer click en una de las filas, tome el contenido de la misma y lo muestre en el div vista previa. cuando hago click en otra borre el conteido del div y muestre el contenido de la nueva fila seleccionada
mi inconveniendo es que siempre me selecciona la primer fila por mas q clickee otra

alguien por favor ayuda!

[Alexis88]

El error que cometes es que cada vez que das un clic sobre una de las filas de la tabla, tomas a las filas de la tabla y por defecto se toma a la primera de ellas. En lugar de eso, debes de utilizar la palabra reservada this con la cual harás referencia al elemento al cual le diste el clic.

Código Javascript:

descripcion = $(this).find('td').first().text();
 

Saludos