Javascript-从表格字段中的HTML表格行添加数据

Question

我想创建一个发票表单，例如当我点击名称输入字段然后按键盘向上和向下箭头键显示弹出表和控制表行，然后按键盘上的Enter键选择一行。最后的事情是当我点击输入然后在所有字段中填写发票。那么我该如何在JavaScript中执行此操作。

表格标记

<form class="data-form">
    <label>Name<input class="name" /></label>
    <label>Product id<input class="product-id" /></label>
    <label>Product Name<input class="product-name" /></label>
    <label>Product Price<input class="product-price" /></label>
</form>

表格标记：

<table class="data-table" id="test">
    <thead>
        <tr>
            <th>Name</th>
            <th>Product id</th>
            <th>Product Name</th>
            <th>Product Price</th>
        </tr>
    </thead>
    <tbody>
       <tr>
           <th>Jhon Deo</th>
           <th>2122</th>
           <th>Koke</th>
           <th>65</th>
        </tr>
        <tr>
           <th>Mark</th>
           <th>2123</th>
           <th>Chocolate</th>
           <th>70</th>
        </tr>
    </tbody>
</table>