添加第11行後，輸入數據返回undefined

Question

我一直在一張桌子上工作，我需要將以前的數據複製到新的行上，或者輸入按鍵點擊或按鈕單擊。它的工作方式與預期的一樣，除非數據一旦到達第11行就變得不明確。

這裏是我的jQuery代碼：

$(function(){ 
// GET ID OF last row and increment it by one 
var $lastChar = 1, $newRow; 
$get_lastID = function(){ 
    var $id = $('#receiving-box-table tr:last-child td:first-child input').attr("id"); 

    var prev_char = $lastChar = parseInt($('#receiving-box-table tr:last-child td:first-child input').attr("id").slice(-1)); 
    var courier_name = $('#courier_name_'+prev_char).val(); 
    var vendor_name = $('#vendor_name_'+prev_char).val(); 

    //console.log('GET id: ' + $lastChar + ' | $id :'+$id); 
    $lastChar = $lastChar + 1; 
    $newRow = "<tr> \ 
       <td><input type='text' class='form-control input-sm track_no' name='courier_tracking_no[]' id='courier_tracking_no_"+$lastChar+"' /></td> \ 
       <td><input type='text' class='form-control input-sm' name='courier_name[]' id='courier_name_"+$lastChar+"' value='"+courier_name+"'/></td> \ 
       <td><input type='text' class='form-control input-sm' name='vendor_name[]' id='vendor_name_"+$lastChar+"' value='"+vendor_name+"' /></td> \ 
       <td class='box-action'><button class='btn btn-danger btn-xs del_ExpenseRow'><span class='fui-cross'></span></button></td> \ 
      </tr>"; 
    return $newRow; 
} 

$('#receiving-box-table').on('keypress','input[name^="courier_tracking_no[]"]:last',function(e){ 
    console.log(this); 
    $get_lastID(); 
    if (e.keyCode == 13) { 
     $('#receiving-box-table tbody').append($newRow); 
     $(this).closest('tr').next().find('input.track_no').focus(); 
     e.preventDefault(); 
    } 
}); 


// ***** -- START ADDING NEW ROWS 
$('#add_ExpenseRow').on("click", function(){ 
    $get_lastID(); 
    $('#receiving-box-table tbody').append($newRow); 
}); 

$('#receiving-box-table').on('click','tr .del_ExpenseRow',function(e){ 
    e.preventDefault(); 
    $(this).closest('tr').remove(); 
    $lastChar = $lastChar-1; 
    }); 

}); 

的HTML：

<div class="col-md-12"> 
      <table id="receiving-box-table" class="table table-hover"> 
       <thead> 
        <tr> 
         <th>Courier Tracking #</th> 
         <th>Courier</th> 
         <th>Vendor</th> 
         <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td><input type="text" class="form-control input-sm track_no" name="courier_tracking_no[]" id="courier_tracking_no_1" /></td> 
         <td><input type="text" class="form-control input-sm" name="courier_name[]" id="courier_name_1" /></td> 
         <td><input type="text" class="form-control input-sm" name="vendor_name[]" id="vendor_name_1" /></td> 
         <td class="box-action"><button class="btn btn-warning btn-xs clear-data"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span></button></td> 
        </tr> 
       </tbody> 
      </table> 
      <div class="text-right"> 
       <button id="add_ExpenseRow" class="btn btn-lg btn-info">Add</button> <button class="btn btn-lg btn-info">Save</button> 
      </div> 
     </div> 

我的猜測是，這個代碼是罪魁禍首：到達因爲後

var prev_char = $lastChar = parseInt($('#receiving-box-table tr:last-child td:first-child input').attr("id").slice(-1)); 

，它可以追溯到。任何幫助，高度讚賞。

Answer 1

爲了達到預期的結果，請使用以下選項

var str = $('#receiving-box-table tr:last-child td:first-child input').attr("id"); 

    var index = str.lastIndexOf("_"); 
var result = str.substr(index+1); 
    console.log(result) 

    var prev_char = $lastChar = parseInt(result); 

Codepen- https://codepen.io/nagasai/pen/EXgqOz

問題：對於變量prev_char，$ lastChar .slice（-1）將返回唯一的最後一個字符串即0 courier_name_1 而不是最後2個字符串即10

分辨率：代替slice（-1），使用lastIndexOf獲取最後一個下劃線後的字符串

Answer 2

如果您想稍微修改一下使用您的答案。

if ($('#receiving-box-table tr').length <= 10){ 
     var prev_char = $lastChar = parseInt($('#receiving-box-table tr:last-child td:first-child input').attr("id").slice(-1)); 
    } else { 
     var prev_char = $lastChar = parseInt($('#receiving-box-table tr:last-child td:first-child input').attr("id").slice(-2)); 
    } 

這可以解決。

Answer 3

貌似prev_char正從產生0右側切片時，它是10

你可以找到你的ID的子字符串並將空白代替它獲得數量：

var str = $('#receiving-box-table tr:last-child td:first-child input').attr("id"); 
var prev_char = parseInt(str.replace("courier_tracking_no_", ""));