Как отобразить выбранные HTML значения строк таблицы, содержащие изображения - PullRequest
Новая
       64

Как отобразить выбранные HTML значения строк таблицы, содержащие изображения

0 голосов
/ 06 мая 2020

Когда я щелкаю строку в таблице, я хочу показать ее значения вверху. Я видел, как sh это можно сделать с помощью текста, но я также хочу включить изображения. Было предложено использовать div, но я не могу заставить его работать. Я планирую иметь неопределенное количество строк и данных. Любая помощь будет принята с благодарностью. Спасибо. 

<head>

    <style>
        table tr:not(:first-child){
            cursor: pointer;transition: all .25s ease-in-out;
        }
        table tr:not(:first-child):hover{background-color: #ddd;}
        .mainImage { width: 138px; height: 138px; }
        .subImage { width: 50px; height: 50px; }
    </style>
</head>

<body>

    Profile Image:
    <div class="mainImage">
        <img src="" />
    </div>
    Smaller Image:
    <div class="subImage">
        <img src="" />
    </div>

    First Name:<input type="text" name="fname" id="fname"><br><br>
    Last Name:<input type="text"  id="lname"><br><br>
    Age:<input type="text" name="age" id="age"><br><br>

    <table id="table" border="1">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Image</th>
            <th>Small Image</th>
        </tr>

        <tr>
            <td>FN1</td>
            <td>LN1</td>
            <td>10</td>
            <th><img src="images/image1.png" width="138" height="138" ></th>
            <th><img src="images/subimage1.png" width="138" height="138" ></th>
        </tr>

        <tr>
            <td>FN2</td>
            <td>LN2</td>
            <td>20</td>
            <th><img src="images/image2.png" width="138" height="138" ></th>
            <th><img src="images/subimage2.png" width="138" height="138" ></th>
        </tr>
    </table>

    <script>

            var table = document.getElementById('table');

            for(var i = 1; i < table.rows.length; i++)
            {
                table.rows[i].onclick = function()
                {
                     //rIndex = this.rowIndex;
                     document.getElementById("fname").value = this.cells[0].innerHTML;
                     document.getElementById("lname").value = this.cells[1].innerHTML;
                     document.getElementById("age").value = this.cells[2].innerHTML;
                };
            }

     </script>

</body>

...