Использование пользовательского ввода в форме HTML в режиме реального времени в HTML внедренном Java коде - PullRequest
Новая
       2

Использование пользовательского ввода в форме HTML в режиме реального времени в HTML внедренном Java коде

0 голосов
/ 11 марта 2020

Я работаю над java severlet с Maven и Spring.

Мне нужно создать таблицу с динамическим c количеством строк. Строки должны быть созданы с помощью переменной "amountRows". Пока что я лучше всего создаю количество строк c со встроенным кодом java и затем динамически скрываем их с помощью CSS / JavaScript.

Любая идея, как я мог бы избавиться от "15" в for-l oop и заменить его переменной "amountRows"?

В качестве альтернативы есть идея для более плавного решения? 

 <form action="/myServlet/.../Page.html" method="post">
    <table>
    <caption><center><b>Table Title</b></center></caption>
        <tr><td><input type="number" min="00000" max="30" name="amountRows"/></td></tr>
        <tr>
            <td>column-title</td><td>column-title</td><td>column-title</td><td>column-title</td>
        </tr>
        <%  
            int i = 1;
            for(; i <= 15; i++) {
                out.print("<tr><td>Cell1</td><td>Cell2</td><td>Cell3</td><td>Cell4</td");
            }
        %>          
    </table>
    <input type="submit"/>
</form>

1 Ответ

0 голосов
/ 11 марта 2020

Вы можете использовать Thymeleaf для этого. Вот пример из одного из моих проектов: 

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <head>
        <title>Home</title>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" 
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
            integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
            crossorigin="anonymous">
        <link rel="stylesheet" href="/css/main.css"/>
    </head>
    <body>

        <div class="row">

            <div class="container col-9">
                <table class="table table-striped">
                    <thead>
                        <th class="standard">Song Title and Artist</th>
                        <th class="year" style="font-weight:900">Year</th>
                    </thead>
                    <tbody>
                        <tr th:each="song : ${songs}">
                            <td>
                                <a href="#" 
                                   th:href="@{/playsong(id=${song.songId})}"
                                   th:text="${song.title + ' - ' + song.artist}">
                                    Song title and artist
                                </a>
                            </td>
                            <td class="year" th:text="${song.year}">
                                Song year
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <footer>
            &copy; Copyright 2020 Lindsay Nickalo. All rights reserved.
        </footer>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
            crossorigin="anonymous"></script>
    </body>
</html>

В своих сопоставлениях вы просто добавляете переменную в модель, используя model.addAttribute("amountRows", amountRows);, и затем она доступна для использования в html с Thymeleaf. Для моего примера я передал весь список объектов Song, а затем использовал th:each="song : ${songs}", чтобы создать строку таблицы для каждой песни. В Thymeleaf вы ссылаетесь на переменные, используя ${variable}

В вашем POM включите 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...