添加第11行后,输入数据返回undefined

时间:2017-06-15 07:03:29

标签: jquery html html-table

我一直在工作,我需要在输入键点击或按钮点击时将以前的数据复制到新行。它按预期工作,除了数据到达第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));

因为在达到 10 之后,它会回到 1 。任何帮助都非常感谢。

3 个答案:

答案 0 :(得分: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 0 而不是最后2个字符串,即10

分辨率:而不是切片(-1),使用lastIndexOf获取最后一个下划线后的字符串

答案 1 :(得分:1)

看起来prev_char正在从右边切片,当它是10时会得到0。

您可以在ID中找到子字符串,并将其替换为空白以获取数字:

from classification_model import *

答案 2 :(得分:0)

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

    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));
    }

这会解决。