Блог

Главная - Вопросы по программированию - отображение изображения в таблице с помощью html-скрипта

отображение изображения в таблице с помощью html-скрипта

#javascript #html #html-table

Вопрос:

Мой подход состоял бы в том, чтобы создать объект изображения в каждой строке таблицы, а затем установить источник для содержимого второго столбца. Для этого нам нужно присвоить элементу tbody идентификатор, а затем выполнить итерацию для каждого его дочернего элемента.

Сначала проверьте, существует ли имя файла image_file_ в таблице html, а затем покажите изображение в другой ячейке с помощью javascript.Я предоставил 2 изображения в down blow. Первое изображение содержит папку с изображениями, в которой у меня есть список изображений, а второе изображение показывает макет HTML-страницы.

Папка с изображениями (217 изображений)

Путь

Таблица (217 строк) Стол

 <!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript">

        function displayPictures() {
            //Deaclaring variables
            var tbody, row, imageObject
            //Get the tbody element
            tbody = document.getElementById("tbody >tr >td")
            //For each row
            for (row of tbody) {
                //We create an image object 
                imageObject.onerror = function (e) {
                    this.src = ["/master_project_ideas/imagetocsv/img/MessageMediaPhoto-ID-48.jpg"]
                }
                imageObject.alt = "Not found"

                imageObject = new Image()
                //We set the image source to the 2nd columns content
                imageObject.src = row[2].innerText
                //And finally, we replace the 5th cell's content
                row[5].innerHTML = ""
                row[5].appendChild(imageObject)
            }
        }

    </script>
</head>

<body>
    <table border="10" id="dataframe">
        <thead>
            <tr style="text-align: right;">
                <th>Image_id</th>
                <th class="image_file_name"> image_file_name</th>
                <th>Image_Text_output </th>
                <th>date</th>
                <th id="show_image">Show_image</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>/Users/dawitabay/Desktop/master_project_ideas/Image_to_text_with_Tesseract/imagetocsv/img/MessageMediaPhoto-ID-48.jpg
                </td>
                <td>test 2</td>
                <td>24-09-2021 12:20:47</td>
                <td> NaN
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>/Users/dawitabay/Desktop/master_project_ideas/Image_to_text_with_Tesseract/imagetocsv/img/MessageMediaPhoto-ID-48.jpg
                </td>
                <td>test 2</td>
                <td>24-09-2021 12:20:47</td>
                <td>NaN</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Комментарии:

1. У вас множество проблем с этим коротким фрагментом кода. Начните с проверки ошибок, возникающих в консоли инструментов разработки браузера. Всегда включайте ошибки в свои вопросы

2. Не пойманный (в обещании) Ошибка типа: Не удается прочитать свойства null (чтение ‘parentNode’) в getColumnIndex (app.js:123) при инициализации (app.js:161)

3. Это из-за использования getElementById() , которое не принимает аргумент селектора css

Метки: