Стол с изображением

Question

может кто-нибудь мне помочь, мне нужно создать таблицу, которая при нажатии на строку меняет отображаемое изображение, которое будет рядом с ней.нечто похожее на то, что показано ниже.

Answer 1

Вот базовый пример:

<div class="box-body">
    <div class="row">
        <div class="col-md-8">
            <div class="row pad">
                <div class="col-md-12">
                    <h3><i class="fa fa-table"></i> Produtcs Report</h3>
                </div>
            </div>
            <div class="box">
                <div class="box-body table-responsive">
                    <table class="table table-striped">
                       <thead>
                            <tr>
                                <th>Codigo</th>
                                <th>Descricao</th>
                                <th>Vlr. Unit.</th>
                                <th>Quantidade</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr name="loadPhoto" data-url="https://picsum.photos/200/300/?image=1">
                                <td>123456789</td>
                                <td>DESCRICAO 1 BLA BLA BLA</td>
                                <td>41,99</td>
                                <td>1</td>
                                <td>41,99</td>
                            </tr>
                            <tr name="loadPhoto" data-url="https://i.stack.imgur.com/xljCS.png">
                                <td>123456789</td>
                                <td>DESCRICAO 2 BLA BLA BLA</td>
                                <td>41,99</td>
                                <td>1</td>
                                <td>41,99</td>
                            </tr>
                            <tr name="loadPhoto" data-url="https://picsum.photos/200/300/?image=2">
                                <td>123456789</td>
                                <td>DESCRICAO 3 BLA BLA BLA</td>
                                <td>41,99</td>
                                <td>1</td>
                                <td>41,99</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div>
                <img id="productImage" width="300" />
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("tr[name='loadPhoto']").click(function(){
            url = $(this).data('url');
            $('#productImage').attr('src', url);
        });
    });
</script>

Answer 2

$("#rowid").click(function(){
    $("imageid").show();
});