테이블이 하나 있고 각 컬럼별 검색기능을 제이쿼리로 구현중에 있습니다.

td:nth-child() 여기서 td:nth-child(3) 이런식으로 직접 숫자를 넣으면 원하는대로 잘 동작을 하는데요

index에 원하는 숫자값이 들어있고 타입도 number인데 이걸 넣으면 인식을 못하네요 ㅠㅠㅠ

다시말하면 td:nth-child(7) 이렇게 숫자를 넣으면 잘 동작하는데 

function keyevent(i) {
    let textVal = $("#searchId" + i).val();  // 입력한 값을 textVal에 넣기
    $('#gridTable > tbody > tr:nth-child(n+2)').hide(); // 테이블 내용 일단 지우기
    let index = i+1;
    let temp = $("#gridTable > tbody > tr > td:nth-child(7):contains('" + textVal + "')");
    $(temp).parent().show();
}

아래처럼 하면 안됩니다 ㅠㅠ 

function keyevent(i) {
    let textVal = $("#searchId" + i).val();  // 입력한 값을 textVal에 넣기
    $('#gridTable > tbody > tr:nth-child(n+2)').hide(); // 테이블 내용 일단 지우기
    let index = i+1;
    let temp = $("#gridTable > tbody > tr > td:nth-child('" + index + "'):contains('" + textVal + "')");
    $(temp).parent().show();
}

td:nth-child('" + index + "') 이것뿐만아니라 

td:nth-child(index)랑 td:nth-child(' + index + ') 이것도 인식이 안됩니다.. 

에러메시지는 아래와같아요

(에러메시지: Uncaught Error: Syntax error, unrecognized expression: :nth-child)

정말 프론트쪽은 어렵네요 .. 해결책좀 주세요고수님들