테이블의 검색 데이터가 작동하지 않습니다.

Question

현재 자바 스크립트 작업 중입니다. 이 코드에는 테이블과 텍스트 상자가 있습니다. 텍스트 상자에 데이터를 입력하면 입력 한 특정 값이 표시되지만 표의 데이터는 검색되지 않습니다. 표에서 데이터를 검색하려면 어떻게해야합니까? 아래 링크를 제공했습니다.

http://jsfiddle.net/SuRWn/

 <table name="tablecheck" class="Data" id="results" > 
     <thead> 
    <tr ><th>&nbsp;</th> 
     <th>&nbsp;</th> 
     <th><center> <b>COURSE CODE</b></center></th> 
    <th><center>COURSE NAME</center></th></tr> 
     </thead> 

     <tbody> 
     <tr id="rowUpdate" class="TableHeaderFooter"> 
     <td> 
      <center> <input type="text" name="input" value="course" ></center> 
      <center> <input type="text" name="input" value="course1" ></center> 
      <center> <input type="text" name="input" value="course2" ></center> 
     </td> 
     <td> 
      <center> <input type="text" name="input" value="subject" ></center> 
      <center> <input type="text" name="input" value="subject1" ></center> 
      <center> <input type="text" name="input" value="subject2" ></center> 

     </td> 


      </tr> 

      </tbody> 

     </table > 
     <form action="#" method="get" onSubmit="return false;"> 
      <label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" /> 
     </form> 

     <script> 
function doSearch() { 
    var q = document.getElementById("q"); 
    var v = q.value.toLowerCase(); 
    var rows = document.getElementsByTagName("tr"); 
    var on = 0; 
    for (var i = 0; i < rows.length; i++) { 
     var fullname = rows[i].getElementsByTagName("td"); 
     fullname = fullname[0].innerHTML.toLowerCase(); 
     if (fullname) { 
      if (v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) { 
       rows[i].style.display = ""; 
       on++; 
      } else { 
       rows[i].style.display = "none"; 
      } 
     } 
    } 

} 

Answer 1

이 코드에 대한 몇 가지를 강조하고 싶습니다 : 테이블 헤더 행으로 첫 번째 행이 있기 때문에,

코드에서

• 은, 루프는 0부터 시작을 "tr"요소를 포함하지 않습니다. 따라서 귀하의 기능이 작동하지 않습니다.
• 루프를 1에서 시작하면 입력 요소를 통해 값을 검색해야합니다. 기존의 접근 방식은 효과가 없습니다. 1부터 루프의 경우

, 귀하의 전체 이름 변수는 다음과 같이 표시됩니다

당신이 당신의 비교 논리를 수정해야합니다 수 있음 값을 가져 오는으로 입력 필드

Answer 2

좋아, 여기서 작동하는 버전이지만 알고리즘이 완벽하지 않습니다. 디버깅 및 논리 오류를 수정할 수 있습니다

첫 번째 문제 : 많은 의미 론적 오류가 여전히 당신과 함께 완벽하지 비교할 수 있었다

onKeyUp="javascript:doSearch();" 

JSFiddle

: 다음 (아가씨 3 글자 문제, 그리고 뭔가를 찾은 경우)

"코스"를 입력하면 발견되지만 모든 것을 계속 표시합니다 (수정해야합니다.) ype 이하 3 글자, 아무것도하지 말고, 모두 숨기지 마라.

function doSearch() { 
var q = document.getElementById("q"); 
var v = q.value.toLowerCase(); 
var rows = document.getElementsByTagName("tr"); 
var on = 0; 
for (var i = 0; i < rows.length; i++) { 
    var fullname = rows[i].getElementsByTagName("td"); 
    if (fullname.length > 0) { 
     fullname = fullname[0].innerHTML.toLowerCase(); 
     if (fullname) { 
      if (v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) { 
       rows[i].style.display = ""; 
       on++; 
      } else { 
       rows[i].style.display = "none"; 
      } 
     } 
    } 
    } 
} 

Answer 3

원하는 방식으로 html을 사용하고 있습니까? 행이있는 테이블을 만든 다음 사용자 입력을 기반으로 해당 행을 필터링하려는 것 같습니다. 귀하의 HTML이 지금은 하나의 행이 있습니다.

문제를 해결 한 후에는 jquery를 사용하는 것이 좋습니다. 여기 시작하는 바이올린은 다음과 같습니다 http://jsfiddle.net/SuRWn/11/

$(function() { 
    var q = $('#q'), 
     boxes = $('td input'); 

    $('#q').on('keyup', function (e) { 
     var qterm = q.val(); 

     if (qterm.length < 3) { 
      boxes.show(); 
     } else { 
      boxes.each(function(i,o) { 
       var box = $(this); 
       box.toggle(box.val().indexOf(qterm) > -1); 
      }); 
     } 
    }); 
}); 

편집 : 노트 바이올린이 (행이 없기 때문에 필터하기 위해) 당신의 입력 상자 현재 행을 필터링하는 것을