如何使用java脚本将下一个光标移动到html表中的下一行答案

【问题标题】：how to move next cursor on next row in html table using java script如何使用java脚本将下一个光标移动到html表中的下一行
【发布时间】：2022-01-23 16:10:16
【问题描述】：

嗨，我有 HTML 表格文本字段，当我单击添加按钮时，我想移动下一行，请指导我如何执行此操作，请参见下图

问题目前，新行是一个克隆，因此新行的元素将具有与原始行相同的名称。导致 selSupplierName 字段重复。

症状当 JQuery 然后根据名称 selSupplierName 找到该字段时，它将选择第一个实例，而不是 selSupplierName 的新行。

这是我的代码

 <head>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<link href="/Content/style.css" rel="stylesheet" />
<link rel="stylesheet"  
 href="https://cdnjs.cloudflare.com/ajax/libs/font- 
 awesome/4.7.0/css/font-awesome.min.css" />
<link href="https://code.jquery.com/ui/1.10.4/themes/ui- 
 lightness/jquery-ui.css" rel="stylesheet">
<script src="~/scripts/bootstrap.min.js"></script>
<style>
    .highlight_row {
        background-color: red;
    }

    .hidden {
        display: none;
    }
</style>

</head>
<div class="row">
<div class="col-md-10" style="margin:auto">
    <table class="styled-table" id="item-list">
        <colgroup>
            <col style="width:25%">
            <col style="width:25%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:10%">
            <col style="width:10%">

        </colgroup>
        <thead style="height:40px;font-size:12px;font- 
      weight:bold">
            <tr>
                <th class="px-1 py-1 text-center">Store Name</th>
                <th class="px-1 py-1 text-center">Product 
       Name</th>
                <th class="px-1 py-1 text-center">Unit</th>
                <th class="px-1 py-1 text-center">Qty</th>
                <th class="px-1 py-1 text-center">Price</th>
                <th class="px-1 py-1 text-center">Total</th>
                <th class="px-1 py-1 text-center">Action</th>
            </tr>
        </thead>
        <tbody>
           
            <tr class="po-item" data-id="">
              
                <td class="align-middle p-1">
    <select name="selSupplierName" 
   id="selSupplierName" onkeypress="return 
   pressEnter('ProductName')" tabindex="3" class="form-control 
    js-example-basic-single">
                        <option value="">Select Supplier</option>
                        @{
                        foreach (string name in 
      ViewBag.SupplierList)
                        {
                        <option value="@name">@name</option>
                        }
                        }


                    </select>

                </td>
                <td class="align-middle p-1">
                    <input type="hidden" name="item_id[]">
                    <input type="text" id="ProductName" onkeypress="return pressEnter('qty')" class="form-control text-box single-line" required />
                </td>
                <td class="align-middle p-1">
                    <input type="text" class="form-control text-box single-line" name="unit[]"  />
                </td>

                <td class="align-middle p-0 text-center">
                    <input type="number" class="form-control text-box single-line" onkeypress="return pressEnter('unit_price')" step="any" id="qty" name="qty[]" />
                </td>
                
               
                <td class="align-middle p-1">
                    <input type="number" step="any" class="form-control text-box single-line" onkeypress="return pressEnter('add_row')" id="unit_price" name="unit_price[]"  />
                </td>
                <td class="align-middle p-1">
                    <input type="number" step="any" class="form-control text-box single-line" name="total-price[]" />
                </td>
             
                <td class="align-middle p-1 text-center">
                    <button class="btn btn btn-sm btn-flat btn-primary py-0 mx-1" type="button"   id="add_row"><i class="fa fa-plus"></i></button>
                    <button class="btn btn-sm btn-danger py-0" type="button" onclick="rem_item($(this))"><i class="fa fa-times"></i></button>
                </td>
                 
                 
            </tr>
           
                    </tbody>
        <tfoot>
            <tr class="bg-lightblue">
            <tr>
                <th class="p-1 text-right" colspan="5">Total</th>
                <th class="p-1 text-right" id="sub_total">0</th>
            </tr>
            <tr>
                <th class="p-1 text-right" colspan="6">
                    Discount (%)
                    <input type="number" step="any" name="discount_percentage" class="border-light text-right">
                </th>
                <th class="p-1"><input type="text" class="w-100 border-0 text-right" readonly /></th>
            </tr>
            <tr>
                <th class="p-1 text-right" colspan="6">
                    Tax Inclusive (%)
                    <input type="number" step="any" name="tax_percentage" class="border-light text-right">
                </th>
                <th class="p-1"><input type="text" class="w-100 border-0 text-right" readonly /> </th>
            </tr>
            <tr>
                <th class="p-1 text-right" colspan="5">Total</th>
                <th class="p-1 text-right" id="total">0</th>
            </tr>
          
        </tfoot>
    </table>
   
    </div>
    </div>


   <table class="styled-table" id="item-clone" 
 style="margin:auto;display:none;width:auto" >
  <tr class="po-item" data-id="">
    <td class="align-middle p-1">
   <select name="selSupplierName" id="selSupplierName" 
   onkeypress="return pressEnter('BiltyNo')" tabindex="3" 
   class="form-control js-example-basic-single">
            <option value="">Select Supplier</option>
            @{
            foreach (string name in ViewBag.SupplierList)
            {
            <option value="@name">@name</option>
            }
            }


        </select>
    </td>
    <td class="align-middle p-1">
        <input type="hidden" name="item_id[]">
        <input type="text" class="form-control text-box single-line" id="ProductName" onkeypress="return pressEnter()" required />
    </td>
    <td class="align-middle p-1">
        <input type="text" class="form-control text-box single-line" name="unit[]" />
    </td>

    <td class="align-middle p-0 text-center">
        <input type="number" class="form-control text-box single-line" step="any" name="qty[]" />
    </td>
    
    
    <td class="align-middle p-1">
        <input type="number"   class="form-control text-box single-line" name="unit_price[]" value="0" />
    </td>
    <td class="align-middle p-1">
        <input type="number" step="any" class="form-control text-box single-line" name="total-price[]" />
    </td>

    <td class="align-middle p-1 text-center">
        <button class="btn btn btn-sm btn-flat btn-primary py-0 mx-1" onclick="add_row()"  type="button" id="add_row"><i class="fa fa-plus"></i></button>
        <button class="btn btn-sm btn-danger py-0" type="button" onclick="rem_item($(this))"><i class="fa fa-times"></i></button>

    </td>
    <td class="align-middle p-1 text-center">

    </td>

<script>

function pressEnter(nextInput) {

    // Key Code for ENTER = 13
    //if ((event.keyCode == 13)) {

    //    document.getElementById(nextInput).focus({ preventScroll: false });
    //}
}

function rem_item(_this) {
    _this.closest('tr').remove()
}

function calculate() {
    var _total = 0
  
    $('.po-item').each(function () {
        var row_total = 0;
        var qty = $(this).find("[name='qty[]']").val()
        var unit_price = $(this).find("[name='unit_price[]']").val()
        
        if (qty > 0 && unit_price > 0) {
            row_total = parseFloat(qty) * parseFloat(unit_price)
           
        }
        $(this).find("[name='total-price[]']").val((row_total))
      
       
    })
   
}

//$('#add_row').click(function () {
//    var tr = $('#item-clone tr').clone()
//    $('#item-list tbody').append(tr)
//    //_autocomplete(tr)
//    tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
//        calculate()
//    })
//        $("#selSupplierName").focus();
//})

$('#add_row').click(function () {

    // Get the count of rows.
    var counter = $('.my-row-class').length;

    // Your clone functionality.
    var tr = $('#item-clone tr').clone();

    // Add a class to it.
    tr.addClass("my-row-class");

    // Define the new ID (Not using iterpolation on purpose). 
    var newId = "row" + counter;
    tr.attr('id', newId);
     
    // Add it to the table body.
    $('#item-list tbody').append(tr);

    // Your calc function.
    tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
        calculate();
    });

    alert(newId);
    // Select based on the composite id.
   // $("#selSupplierName").find('input:last').focus();

    $(newId + " #selSupplierName").focus();
})

function add_row()
{
    $('#add_row').trigger('click')
}

$(document).ready(function () {
  
    if ($('#item-list .po-item').length > 0) {
        $('#item-list .po-item').each(function () {
            var tr = $(this)
          //  _autocomplete(tr)
            tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
                calculate()
            })
            //$('#item-list tfoot').find('[name="discount_percentage"],[name="tax_percentage"]').on('input keypress', function (e) {
            //    calculate()
            //})
            tr.find('[name="qty[]"],[name="unit_price[]"]').trigger('keypress')
        })
    } else {
        $('#add_row').trigger('click')
    }
    $('.select2').select2({ placeholder: "Please Select here", width: "relative" })



})

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。
只是检查一下，您要添加新行还是在中间插入新行？有了更多背景信息，我相信我们可以快速提供帮助。
@DanielZA 当我单击添加按钮时添加了新行并希望关注 selSupplierName 字段新添加的行..查看我的代码此代码始终关注第一行 selSupplierName 字段
问题在于添加新行在技术上会创建一个具有相同元素的新行。所以理论上你会有一个重复的selSupplierName。
推荐的解决方案是为行创建一个动态 ID，然后选择元素作为添加行的子元素。对于您的示例，这是因为 tr 是该行的文字克隆。因此，通过添加 ID 属性，您将能够选择要关注的对象的正确实例。

标签： javascript html ajax

【解决方案1】：

问题

目前，新行是一个克隆，因此新行的元素将具有与原始行相同的名称。导致selSupplierName 字段重复。

症状

当 JQuery 然后根据名称 selSupplierName 找到该字段时，它将选择第一个实例，而不是 selSupplierName 的新行。

建议

正确的解决方案是向克隆的行 (tr) 添加一个 ID，因为这样可以很容易地找到新创建的行的子代，也称为 selSupplierName。

快速解决方法是选择selSupplierName 的最后一个实例，因为从技术上讲，这应该是新行所在的位置。

建议修复的快速示例

$('#add_row').click(function () {

    // Get the count of rows.
    var counter = $('.my-row-class').size();
   
    // Your clone functionality.
    var tr = $('#item-clone tr').clone();

    // Add a class to it.
    tr.addClass( "my-row-class" );

    // Define the new ID (Not using iterpolation on purpose). 
    var newId = "row" + counter;
    tr.attr('id') = `row`;

    // Add it to the table body.
    $('#item-list tbody').append(tr);

    // Your calc function.
    tr.find('[name="qty[]"],[name="unit_price[]"]').on('input keypress', function (e) {
        calculate();
    });

    // Select based on the composite id.
    $(newId + " #selSupplierName").focus();
})

我相信这样的事情应该可以在您的解决方案中使用，但是由于我没有对您的所有相关代码进行测试，这会很痛苦。

潜在快速修复的快速示例

// Select the last instance of the element.
$("#selSupplierName").last().focus();

【讨论】：

没问题，只要有帮助。
不工作让发布整个代码请检查我现在更新我的问题