can I change text to input box with click the text in bootstrap or thymeleaf?

Question

here is my sample code.

<table id="sampleTable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
        </tr>
    </thead>
    <tbody>
        <tr style="cursor:pointer"> <!-- I want to click this row -->
            <td> text1</td> <!-- when the row is clicked, I want to change this text "text1" to "<input>" tag. -->
            <td> text2</td>
            <td> text3</td>
        </tr>
    </tbody>
</table>

there aren't any thymeleaf tag, but I can use them whem I want to.

Answer 1

Here you go with the solution https://jsfiddle.net/8h00oc9d/1/

$('table tbody tr').click(function(){
	$($(this).children()[0]).html('<input type="text" />')
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sampleTable" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
        </tr>
    </thead>
    <tbody>
        <tr style="cursor:pointer"> <!-- I want to click this row -->
            <td> text1</td> <!-- when the row is clicked, I want to change this text "text1" to "<input>" tag. -->
            <td> text2</td>
            <td> text3</td>
        </tr>
    </tbody>
</table>