CODEWITHSUNDEEP
javascript
Emilio Dami Silva
Emilio Dami Silva

Reputation: 25

How do I move the cursor to next input within the next column of the table?

I have my table and I dynamically place an input in the cell as the user clicks on add row, and the input is done dynamically, how do I move to that input right after the user clicks on the add item?

<script type="text/javascript">

    function addsLine(myTable) {
        var table = document.getElementById(myTable);
        var numLine = table.rows.length;
        var line = table.insertRow(numLine);
        var cel1 = line.insertCell(0);
        var cel2 = line.insertCell(1);
        var inputDinamic = 'item' + numLine;
        var cel = "<input style='border: 0' name="
        var cel = cel + "'" + inputDinamic + "'";
        var cel = cel + " value='1' type='number' id='" + "'" + inputDinamic + "'>";
        cel1.innerHTML = numLine;
        cel2.innerHTML = cel;
    }
</script>
<table id="myTable">
    <thead>
        <tr>
            <td>Selection</td>
            <td>Value</td>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
<button class="btn btn-success" onclick="addsLine('myTable')">Add</button>

Upvotes: 0

Views: 296

Answers (1)

imvain2
imvain2

Reputation: 15847

There are a few ways to refer to the field, but no matter how you call the field, you will want to focus() it.

    function addLine(myTable) {
        var table = document.getElementById(myTable);
        var numLine = table.rows.length;
        var line = table.insertRow(numLine);
        var cel1 = line.insertCell(0);
        var cel2 = line.insertCell(1);
        var inputDinamic = 'item' + numLine;
        var cel = "<input style='border: 0' name="
        var cel = cel + "'" + inputDinamic + "'";
        var cel = cel + " value='1' type='number' id='" + "'" + inputDinamic + "'>";
        cel1.innerHTML = numLine;
        cel2.innerHTML = cel;
        cel2.querySelector("input[type='number']").focus();
    }
<table id="myTable">
    <thead>
        <tr>
            <td>Selection</td>
            <td>Value</td>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>
<button class="btn btn-success" onclick="addLine('myTable')">Adicionar</button>

Upvotes: 1

Related Questions