Блог

Главная - Вопросы по программированию - Извлечение html-таблицы из другого источника

Извлечение html-таблицы из другого источника

#javascript #html #asp.net #json

#javascript #HTML #asp.net #json

Вопрос:

Я работаю над веб-страницей, которая загружает продукты из файла JSON. Страница загрузила мою важную информацию, и есть кнопка, которая называется «Дополнительная информация». Когда я нажимаю на эту кнопку, я хочу загрузить большую таблицу, которая важна для конкретного продукта. Я не могу поместить эту таблицу в файл json, потому что она слишком большая. Есть ли какие-либо варианты, при которых я помещаю содержимое таблицы в отдельный файл, а затем извлекаю его как изображение.

файл json

   {
    "id": "1",
    "naziv": "Obujmice s pužnim vijkom W1",
    "img": "images/normaclamp-torro.jpg",
    "materijal": "Cinčano",
    "din": "DIN 3017",
    "opis": "Šesterokutni vijak s prorezom za izvijač, veličina 7 C7"
  },
  {
    "id": "2",
    "naziv": "Obujmice s pužnim vijkom W2",
    "img": "images/normaclamp-torro.jpg",
    "materijal": "Inox čelik 1.4510",
    "din": "DIN 3017",
    "opis": "Šesterokutni vijak s prorezom za izvijač, veličina 6 C6"
  }

таблица, которую я хочу поместить

 <table width="280" style="margin-left:5px;" rules="rows">
        <tr>
            <td style="height:40px; width:110px; font-size:14px;">Opis</td>
            <td style="height:40px; width:50px; font-size:14px;"><div align="center">Širina<br />(mm)</div></td>
            <td style="height:40px; width:100px; font-size:12px;">
                <div align="center">
                    Područje zatezanja<br />
                    (mm)
                </div>
            </td>
        </tr>
        <tr>
            <td>TORRO 8-12/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">8-12</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 10-16/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">10-16</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 12-18/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">12-18</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 12-22/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">12-22</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 16-27/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">16-27</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 20-32/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">20-32</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 25-40/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">25-40</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 30-45/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">30-45</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 35-50/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">35-50</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 40-60/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">40-60</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 50-70/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">50-70</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 60-80/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">60-80</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 70-90/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">70-90</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 80-100/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">80-100</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 90-110/9</td>
            <td><div align="center">9</div></td>
            <td> <div align="center">90-110</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 16-27/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">16-27</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 20-32/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">20-32</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 25-40/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">25-40</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 30-45/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">30-45</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 35-50/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">35-50</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 40-60/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">40-60</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 50-70/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">50-70</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 60-80/12</td>
            <td><div align="center">12</div></td>
            <td><div align="center">60-80</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 70-90/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">70-90</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 80-100/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">80-100</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 90-110/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">90-110</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 100-120/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">100-120</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 110-130/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">110-130</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 120-140/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">120-140</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 130-150/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">130-150</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 140-160/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">140-160</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 150-170/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">150-170</div></td>
            <td>amp;nbsp;</td>
        </tr>
        <tr>
            <td>TORRO 160-180/12</td>
            <td><div align="center">12</div></td>
            <td> <div align="center">160-180</div></td>
            <td>amp;nbsp;</td>
        </tr>
    </table>

это код с позицией, которую я хочу, чтобы таблица была.

 @if (selectedTorro != null)
{
    <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="productTitle">@selectedTorro.naziv</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">amp;times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="card">
                        <div class="card-img" style="background-image: url('@selectedTorro.img');">
                        </div>
                        <div class="card-body">                          
 **i want that table here**
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

1. Прочитайте, как использовать ajax