javascript - 如何将光标移动到表格下一列中的下一个输入？

Question

我有我的表格，当用户单击添加行时，我在单元格中动态放置一个输入，并且输入是动态完成的，如何在用户单击添加项后立即移动到该输入？

<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>

标签： javascript

Answer 1

有几种方法可以引用该字段，但无论您如何称呼该字段，您都会想要focus()它。

    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>