자바 스크립트 추가 목록을 작성하십시오.

Question

추가 기능을 사용하는 Javascript로 목록을 작성하고 싶습니다.

나는 index.php 파일, script.js 파일 및 mysql 쿼리를 만드는 search.php 파일을 가지고있다.

나는 모두 작동하지만 레이아웃이 최상은 아닙니다. 그래서 나는 레이아웃을 더 잘 만드는 방법을 찾았다.

CSS 또는 표를 사용하여 목록으로 표시하고 싶습니다.

지금은 그냥 아무이 414622570992222

this.number = 70992222 this.code = 4146225

그래서 내가 그것을 추천하기 추천하고 싶은 것은이 같은 경계선없이 목록입니다 (하지만처럼 보여줍니다 테두리).

---------------------- 
| Number | Code | 
---------------------- 
| 70992222 | 4146225 | 
---------------------- 

내 script.js 파일의 일부 코드는 다음과 같습니다.

$.each(data.results, function(){ 
         //Give the list element a rel with the data results ID incase we want to act on this later, like selecting from the list 

         $('#results-list').append("<li rel='" + this.number + "'>" + this.code + this.number + "</li>"); 

는 그리고 이것은 내 index.php 파일

 <div id='results-holder'> 


      <ul id='results-list'> 

Answer 1

테이블

<table id='results-list'></table> 

으로 UL 태그를 교체

그런 다음 표 머리글과 행을 jquery로 표에 추가하십시오. HTML 테이블에 대한

$('#results-list').append("<tr><th>number</th><th>code</th></tr>"); 
$('#results-list').append("<tr><td>"+ this.number + "</td><td>" + this.code + "</td></tr>"); 

대한 추가 정보는 여기에서 찾을 수 있습니다 :

http://www.w3schools.com/html/html_tables.asp

Answer 2

그것은 테이블로 더 나은의 디스플레이 라인입니다. 여기 테이블 이 작동하는 예제입니다. 원하는대로 디자인하십시오.

HTML을

<div id='results-holder'> 
    <table id='results-list'> 
     <tr> 
      <th> 
       number 
      </th> 
      <th> 
       code 
      </th> 
     </tr> 
    </table> 
</div>   

자바 스크립트

$(document).ready(function(){ 
    $.each(data.results, function() { 
     $('#results-list').append("<tr><td rel='" + this.number + "'>" + this.code + "</td><td>" + this.number + "</td></tr>"); 
    }); 
}); 

jsFiddle

Answer 3

이가 CSS 또는 테이블을 수행해야 하는가?

이들은 상호 배타적 인 것이 아닙니다. <table>은 HTML 요소입니다. 다른 요소와 마찬가지로 의미 론적 목적이 있는지 선택해야합니다. 즉, 요소가 의미하는 것과 관련된 데이터가 포함되어있는 경우입니다. 그런 다음 CSS를 사용하여 원하는 모양으로 보입니다.

매우 큰 텍스트 단락이있는 경우 여전히 단락이므로 <p>에 넣은 다음 크게 보도록 CSS로 스타일을 지정하십시오. <h1> 요소에 넣으면 크기도 커지지 만 해당 요소는 제목 용입니다.

데이터베이스 테이블 내용을 표시하는 것과 같은 테이블 형식의 데이터가있는 경우 <table>을 사용해야합니다. 그런 다음 CSS를 사용하여 테두리를 숨 깁니다.

나는 이런 식으로 뭔가 할 거라고 :

$.each(data.results, function(){ 
     $('#results-list').append("<tr><td>" + this.code + "'</td><td>" + this.number + "</td></tr>"); 
}); 

을 그리고 #results-list가 <table>