2

Append 関数を使用する 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'>
4

3 に答える 3

0

それはテーブルとしてより良いです。ここにテーブルを使用した作業例があります。好きなようにデザインするだけです。

HTML

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

Javascript

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

jsフィドル

于 2013-10-05T22:35:26.113 に答える
0

ul タグを表に置き換えます

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

次に、jquery を使用して、テーブルの見出しと行をテーブルに追加します。

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

html テーブルの詳細については、次の場所を参照してください。

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

于 2013-10-05T22:36:50.553 に答える
0

これは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>

于 2013-10-05T22:37:07.660 に答える