들어오는 번호를 가려서 마지막 4 자리 만 표시해야합니까?

Question

들어오는 데이터에 대한 링크를주고 숨기도록 j Query datable에 mRender 함수를 작성하고 싶습니다.

나는 2 개의 열을 가지고 있는데 하나는 설명 용이고 다른 하나는 카드 번호 용입니다. Ajax 호출에서 카드 번호를 받으면 카드 번호가 표시되는 두 번째 열에 show and hide 링크가 있어야합니다. 이 숨기기 링크를 표시해야합니다

이 링크의 클릭에 - - 데이터가 채워 도착하면

, 그것은 링크 표시를 표시해야합니다

I이 J 쿼리와 자바 스크립트 것은 새로운 오전.

도움을 주시면 감사하겠습니다. 감사합니다

function DisplayCardList() { 
    oTable = $('#cardTable').dataTable({ 
     "aaData": cardList, 
     "aoColumnDefs": [ 
      { 
       "aTargets": [0], 
       "sClass": "Card Name", 
       "mData": "description" 


      }, 
      { 
       "aTargets": [1], 
       "sClass": "CardNumber", 
       //I need to write the function here.. 
      } 
     ] 
    }); 
    $('#cardTable').show(); 
} 

Answer 1

이 테이블 셀에서 '보기'링크를 표시합니다 , 그러나 그것은 당신을 시작해야하고 당신이 jquery에 익숙하지 않기 때문에, 잘하면 이해하기 어렵지 않다. 이것이 당신의 요구 사항을 충족 시킨다면 우리는 그것을 수정할 수 있습니다.
나는 카드 번호의 저장을 둘러싼 법적 의미가 있음을 언급 할 것입니다. (즉, 특정 요구 사항을 충족시키지 않으면 그렇게하지 않아야합니다.)하지만 이것은 단지 운동 일뿐입니다.

Answer 2

내가 제대로 질문을받을 때, 당신은 주어진 수를 마스크하는 기능이 필요합니다 -는이 같은 것 (정규 표현식은 숫자 형식에 따라 달라집니다 - 당신이 사용할 수 있다고 할 수 있습니다 간단한 substr 대신) :

var num = '1234-4567-7890-4433'; /* example */ 
    container = $('<div class="cc-container"></div>'); 

container 
    .append('<div class="masked-cc">'+mask_cc_number(num)+'</div>') 
    .append('<div class="cc">'+num+'</div>'); 

$('#YOUR_EXISTING_HTML_CONTAINER') 
    .append(container) 
    .on('click','.cc-container',function() { 
     var elm = $(this), 
      mc = elm.find('.masked-cc'), 
      c = elm.find('.cc'); 
     if(mc.is(':visible')) { 
      mc.hide(); 
      c.show(); 
     } else { 
      mc.show(); 
      c.hide(); 
     } 
    }); 

:

var mask_cc_number = function(cc,masked_char) { 

    var masked_char = masked_char || '*', /* the char using to mask */ 
     pattern = /^([0-9-]+)([0-9]{4})$/, /* regex for the given number */ 
     matches = cc.match(pattern);  /* using the regex */ 

    return cc.replace(      
     /([0-9])/g, 
     masked_char, 
     matches[1]) + matches[2]; 
    } 

다음으로는 마스크 번호와 HTML 컨테이너에 원래의 번호를 추가하고,에 당신이 숫자의 표시를 전환해야합니다 클릭해야합니다

데모 용으로 이걸 작은 jsfiddle에 넣어 두었습니다.

Answer 3

jQuery를 모르는 상태에서 고유 JS를 사용 하겠지만, 마스킹 내용과 표시 할 항목을 정확히 알고 있기 때문에 가장 쉬운 방법 인 것 같습니다.

function showData(id){ 
 
    alert(document.getElementById(id).getAttribute('data-data')); 
 
} 
 
function toggleData(id){ 
 
    var elem = document.getElementById(id); 
 
    // If masked 
 
    if(elem.innerHTML.indexOf("XXXX") > -1){ 
 
     elem.innerHTML = elem.getAttribute("data-data"); 
 
    } 
 
    // Else mask it 
 
    else{ 
 
     elem.innerHTML = "XXXX-XXXX-" + elem.getAttribute("data-data").substr(-4); 
 
    } 
 
}

<div id="maskedInfo" data-data="1234-5678-9012">XXXX-XXXX-9012</div> 
 
<button onclick="showData('maskedInfo')">Show Data</button> 
 
<button onclick="toggleData('maskedInfo')">Toggle Data</button>

는 기본적으로 단지 data-* 속성에 마스크되지 않은 데이터를 저장하고 읽을. 유사한 방법을 사용하여 표시된 내용을 토글 할 수도 있습니다. 이것은 매우 '거친 & 준비'예입니다

$(document).on("click", "a.show", function (e) { 
    // get the clicked object 
    var lnk = $(this); 
    // toggle its visibility (ie hide the 'Show' link) 
    lnk.toggle(); 
    // toggle visibility of previous element(ie show the 'Hide' link) 
    lnk.prev().toggle(); 
    // toggle visibility of previous element(show the span tag containing the card no) 
    lnk.prev().prev().toggle(); 

}); 

숨기기/

'mRender': function (data, type, full) { 
      return '<span class=\'hidden\'>' + full[0].substring(full[0].length - 4) + '</span>' + 
      '<a href=\'javascript:;\' class=\'hidden\' id=\'hide\'>Hide</a>' + 
      '<a href=\'javascript:;\' id=\'show\'>Show</a>'; 
} 

자바 스크립트 클릭 이벤트 쇼를 처리 할 수있는 :