How can i use for loop in javascript using thymeleaf?

Question

I am using thymeleaf so when I run this application ,it gives me an error in (for(int i=0;i<10;i++) It means I have to respect the syntaxe of thymeleaf.My question is how

Answer 1

You should wrap your script in this structure :

<script th:inline="javascript">
    /*<![CDATA[*/
    $( document ).ready(function() {
        for(i=0;i<10;i++) {
            ...
        }
    });
    /*]]>*/
</script>

EDIT :

Don't forget to store your javascript and other static files in the /src/main/webapp folder of your spring-boot project

EDIT2 :

You can do directly your script with thymeleaf :

<tr th:each="i : ${#numbers.sequence( 1, db.columns_number)}">
    <td><input id="field" th:name="${'field'+i}" maxlength="255"
        required="required" type="text" /></td>
    <td><input id="Size" th:name="${'Size'+i}" maxlength="255"
        required="required" type="text" /></td>
    <td><select id="Type" th:name="${'Type'+i}">
             ...
        </select></td>
    <td><select id="null" th:name="${'nullabilite'+i}">
            <option value="null">null</option>
            <option value="not_null">not_null</option>
    </select></td>
</tr>

Answer 2

In thymeleaf current scripting modes are javascript (th:inline="javascript") and dart (th:inline="dart").

Use following snippet instead of <script type="text/javascript">

<script th:inline="javascript">
/*<![CDATA[*/
...

   //your code here

...
/*]]>*/
</script>

Answer 3

 <table border='1px'>
    <thead>
        <th>field</th>
        <th>Size</th>
        <th>Type</th>
        <th>null</th>
    </thead>
    <tbody> </tbody>
</table>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(document).ready(function () {
        for (var i = 0; i < 10; i++) {
            var row=[],r=0;
            row[r]="<tr>";
            row[++r]='<td>';
            row[++r]='<input id="field" type="text" name="field"';
            row[++r]=i;
            row[++r]='maxlength="255"  required="required"/>';
            row[++r]='</td><td>';
            row[++r]='<input id="Size" type="text"  name="Size"';
            row[++r]=i;
            row[++r]= 'maxlength="255" required="required"/>';
            row[++r]= '</td>';
            /*
            * this more readable
            * other td
            *
            */
            row[++r]='</tr>';
           $("tbody").append(row.join(""));
        }
    });
    /*]]>*/
</script>