2017-06-27 13 views
0

データベースからのデータが入っているテーブルが<input></input>にあります。[追加]ボタンをクリックするかEnterキーを押したい場合は、新しい行を追加する必要があります。

新しく追加された行にデータを入力すると、既存の配列または以前に追加された同じテーブルのデータと比較されます。一意のデータを入力して自動的に新しい行などを追加するまでは空のままです。

現在、最初のEnterキーを押しているだけです。

ここに私のHTMLです:

<table id="datatable-boxes" class="table table-hover table-bordered table-striped forex-datatable"> 
    <thead> 
     <tr> 
      <th>Courier Tracking #</th> 
      <th>Courier</th> 
      <th>Vendor</th> 
      <th width="20%">Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" form="edit-boxes-form" class="form-control input-sm retrieve_track_no from_db" name="retrieve_courier_tracking_no[]" id="retrieve_courier_tracking_no_1" value="4987176601285" /></td> 
      <td><input type="text" form="edit-boxes-form" class="form-control input-sm from_db" name="retrieve_courier_name[]" id="retrieve_courier_name_1" value="Philpost" /></td> 
      <td><input type="text" form="edit-boxes-form" class="form-control input-sm from_db" name="retrieve_vendor_name[]" id="retrieve_vendor_name_1" value="Ebay" /></td> 
      <td class="box-action"><button class="btn btn-danger btn-xs clear-data" data-toggle="tooltip" data-toggle="modal" title="Delete Box data" data-target="#delete_box_modal_1"><span class='glyphicon glyphicon-trash' aria-hidden="true"></span></button></td> 
     </tr> 
    </tbody> 
</table> 

私のJS:私は2番目の行で呼び出されての現在の値をalert()しようとすると

$(function(){ 
// GET ID OF last row and increment it by one - Edit Boxes 
var $lastRetChar = 1, $newRetRow; 
$get_lastRetID = function(){ 

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

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

    var prev_char = $lastRetChar = parseInt(result); 

    var courier_name = $('#retrieve_courier_name_'+prev_char).val(); 
    var vendor_name = $('#retrieve_vendor_name_'+prev_char).val(); 

    $lastRetChar = $lastRetChar + 1; 
    $newRetRow = "<tr><td><input type='text' form='edit-boxes-form' class='form-control input-sm retrieve_track_no' name='retrieve_courier_tracking_no[]' id='retrieve_courier_tracking_no_"+$lastRetChar+"' autofocus='true'/></td><td><input form='edit-boxes-form' type='text' class='form-control input-sm' name='retrieve_courier_name[]' id='retrieve_courier_name_"+$lastRetChar+"' value='"+courier_name+"'/></td><td><input form='edit-boxes-form' type='text' class='form-control input-sm' name='retrieve_vendor_name[]' id='retrieve_vendor_name_"+$lastRetChar+"' value='"+vendor_name+"' /></td><td class='box-action'><button class='btn btn-danger btn-xs del_RetrieveBox'><span class='glyphicon glyphicon-trash' data-toggle='tooltip' title='Delete row'></span></button></td></tr>"; 

    return $newRetRow; 
} 
$('#datatable-boxes').on('keypress','input[name^="retrieve_courier_tracking_no[]"]:last',function(e){ 
    console.log(this); 
    $get_lastRetID(); 
    if (e.which == 13) { 
     var seen = {}; 
     $('input[name^="retrieve_courier_tracking_no[]"]').each(function() { 
      var ret_txt = $(this).val(); 
      alert(ret_txt); 
      found = findItem(boxes_array, ret_txt); 
      if (seen[ret_txt] || found){ 
       if($(this).hasClass("from_db")){ 
        checker = true; 
        return true; 
       } else { 
        $('.alert-batch-box-data').css('visibility', 'visible'); 
        if(seen[ret_txt]){ 
         $('.alert').append('<p class="text-left">You scanned <strong>'+ret_txt+'</strong> more than once.</p>'); 
        } 
        if (found) { 
         $('.alert').append('<p class="text-left"><strong>'+ret_txt+'</strong> already exists in Batch # <strong>'+found.batch_no+'</strong>.</p>'); 
        } 
        $(this).val(''); 
        box_qty = parseInt($('#datatable-boxes tbody>tr').length); 
        $('#retrieve_box_qty').val(box_qty); 
        checker = false; 
        return false; 
       } 
      } else{ 
       if(ret_txt == ''){ 
        alert('eto ata yun'); 
        checker = false; 
        return false; 
       } 
       seen[ret_txt] = true; 
       if($('#retrieve_courier_tracking_no_1').val() == ''){ 
        $('#add_RetrieveBox').css('visibility', 'hidden'); 
        $('#update_RetrieveBox').css('visibility', 'hidden'); 
        checker = false; 
        return false; 
       } else { 
        checker = true; 
        return true; 
       } 
      } 
     }); 
     if(checker == true){ 
      $('#datatable-boxes tbody').append($newRetRow); 
      $(this).closest('tr').next().find('input.retrieve_track_no').focus(); 
      e.preventDefault(); 
      $('#retrieve_box_qty').val($lastRetChar); 
      $('#add_RetrieveBox').css('visibility', 'visible'); 
      $('#update_RetrieveBox').css('visibility', 'visible'); 
     } 
    } 
}); 
//Append new row on edit boxes > receive 
$('#add_RetrieveBox').on("click", function(){ 
     $get_lastRetID(); 
     $('#datatable-boxes tbody').append($newRetRow); 
     $('#retrieve_box_qty').val($lastRetChar); 
}); 

//Delete newly added row on frontend - Edit boxes-form 
$('#datatable-boxes').on('click','tr .del_RetrieveBox',function(e){ 
    e.preventDefault(); 
    $(this).closest('tr').remove(); 
    $lastRetChar = $lastRetChar-1; 
    $('#retrieve_box_qty').val($lastRetChar); 
}); 
}); 

、それだけで最初の行を呼び出して、空を返します二度。すでに空の空が2回表示されているので、falseを返して新しい行はありません。

例:3行目を持つように入力し

1st data = 4987176601285 (This is from the database) 
2nd data = 123 (This is in frontend) 

打った後、アラートはこれらです:

4987176601285 
*blank* 
*blank* 
eto na yun 

私は、新たに入力されたデータはピックアップされていない理由はわかりません。どんな助けも高く評価されます。ありがとう!

+1

実際のhtmlの例を提供します。あなたのPHPはフロントエンドのデバッグには役に立たない。 [mcve] – charlietfl

+0

を参照してください。PHPタグ@charlietflを削除しました。 –

+0

謝罪@ wolfgang1983。彼らは私のcodeigniterサイトからコードスニペットですか? –

答えて

0

each()の機能をfilter()に変更しました。私はこのことがなぜうまくいったのか、もう一つはそうしなかったのか、全然分かりません。

$('#datatable-boxes input[name^="retrieve_courier_tracking_no[]"]').filter(function() { 
      value = $(this).val(); 
      ret_found = findItem(boxes_array, value); 
      if (existing.indexOf(value) >= 0) { 
       // console.log($(this).val()); 
       ret_checker = false; 
       if(ret_found){ 
        $('.alert-batch-box-data').css('display', 'visible'); 
        $('.alert').append('<p class="text-left"><strong>'+value+'</strong> already exists in Batch # <strong>'+ret_found.batch_no+'</strong>.</p>'); 
       } else if((ret_checker == false) && (!ret_found)){ 
        frontend_duplicate = true; 
        if($(this).val() == ''){ 
         frontend_duplicate = false; 
        } 
       } else { 
        frontend_duplicate = false; 
       } 
       $(this).val(''); 
      } else { 
       ret_checker = true; 
       frontend_duplicate = false 
      } 
      existing.push(value); 
     }); 

次に、以前のコードに合わせて変更しました。

関連する問題