HTML 테이블을 필터링하고 결과를 HTML 테이블에 포함해야합니다.

Question

프로그래밍에 익숙하지 않습니다. HTML 페이지에 5 열 20 행과 입력 필드가 있습니다. 테이블에서 날짜를 검색 할 때 결과는 표 형식이어야합니다. 아래 예제를 참조하십시오. i는 단어 "찬두"를 검색 적

 
chandru, chandu | george, john | ohn, chandu | james, jones | Gita, sham  | 
________________________________________________________________________________ 
Ramu, gopi  | rekha, swathi | Arun, venu | Venu, chandu | prem, ravi, ramu | 
________________________________________________________________________________ 
...    | ...   | ...   | ...   |....    | 
________________________________________________________________________________ 

때, 그 결과는 표 형식으로 아래에 있어야한다 : 검색 결과가 있으면

가

 
chandru, chandu | ohn, chandu | Venu, chandu | 

그 결과, 5 개 컬럼의 테이블에 형성해야 더 오보다, 그것은

내 영어 맨 손으로하세요 ... 2 행에 정렬해야하고 ... 전체 코드와

Answer 1

안녕 Galwegian & 짐, 감사를 제공하시기 바랍니다 요 UR 피드백 .. I 링크 위에서 사용함으로써 링크

http://www.mikemerritt.me/demos/lf-1-2/table.html

아래에 코드를 시도 제가 전체 행을 필터링 할 수 있고, 난 .... 제가 전술 한 바와 같이 필터링해야

Answer 2

기본적으로 누군가에게 당신을위한 완벽한 애플리케이션을 코딩 해줄 것을 요구하는 동안, 나는 이것을 쉽게 할 수있는 몇 가지 컴포넌트를 제공 할 것입니다.

1. Google 시각화 Tables
2. jQuery를 datepickers
3. jQuery를이 autocomplete

는 기본적으로, 당신은 멀리 멀리 (JQuery와가의 모든 항목을 포함하는 자바 스크립트 객체 (autocompleteselect) 이벤트를 선택 자동 완성 장비에 원하는 DOM 객체에 보관하는 것보다 낫다). autocompleteselect 이벤트가 발생하면 데이터의 일치하는 객체를 반복하는 함수를 트리거하고 'addRows'함수를 사용하여 Google 표에로드 한 다음 표를 다시 그립니다.

Google 표는 완전히 정렬 가능하며 필터링 및 다시 그리기가 쉽습니다. datepicker와 입력의 이벤트를 데이터 객체에 연결하면 테이블에 렌더링 될 데이터를 쉽게 조작 할 수 있습니다.

rowArray=[]; 
for (d in dataObj) { 
rowArray+=[ 
    dataObj[d].name, 
    dataObj[d+1].name, 
    dataObj[d+2].name, 
    dataObj[d+3].name, 
    dataObj[d+4].name 
    ]; 
}