1

javascriptとjQueryコードをより美しく書き、読みやすくする方法についてアドバイスをもらいたいと思います。

この場合、リスト要素内にテーブルを挿入したいと思います。リストとテーブルの両方が、スクリプトを使用して動的に追加されます。

私はこのようなコードを持っています：

 $('#Items').append("<ul></ul>");
 var car_index;
 var photo_index;
 var lot_index;
 for (car_index = 0; car_index < cars.length; car_index++)
 {
   lot_index = car_index + 1;
   //From here, I thought the code is really ugly...though it works.
   //I can't image that I will need to adde 3 rows with 6 cols into the table by using this way
   //Also each col may has their own style need to be assigned....
   //Any advise??
   $('#Items ul').append("<li id='r_" + car_index +"'></li>");
   $('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");               
  }

上記のコードのコメントに書いているように。appendメソッドを使用して、そこに多くのHTMLコードを入れることができます。しかし、それは本当に醜いように見えます...そして上記の例では、リストに1行追加しただけです。最終的な目標では、約6つのセルで3つの行を追加する必要があります。各セルには、コンテンツに独自のスタイルが設定されます。それは本当に混乱になります。

どんなアドバイスもいただければ幸いです！ありがとうございました！

4

3 に答える 3

0

これを試してみてください。coz $('#Items ul').append("<li id='r_" + car_index +"'></li>);は " " で囲まれていません。

$('#Items ul').append("<li id='r_"+car_index+"'></li>");
$('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");               
  }
于 2012-08-28T17:19:34.433 に答える
0

おそらく、MustacheまたはjQueryを介してテンプレートを使用します。

続きを読む:どの Javascript テンプレート エンジンをお勧めしますか?

于 2012-08-28T17:17:30.933 に答える
0

わかりました...少し考えた後、この種のコードをより明確に記述する方法を見つけました。より多くの作業が必要になるため、これがグーグの選択であるかどうかはわかりません...しかし、このように書く方が良いと思います。

アイデアは非常にシンプルで、ブロックごとに修正される HTML タグを格納するオブジェクトを作成します。私の例では、リストが追加されるたびにテーブルが繰り返されます。では、すべての固定テーブル タグとそのスタイル属性をオブジェクトのような 1 つの配列に格納してみませんか?

 var unit = 
 {
   table_header : "<table border = '1'>",
   row_1_col_1 : "<tr><td>Lot ",
   row_1_col_2 : "</td><td><a class='addto' href='#'>Add to like</a>",
   row_2_col_1 : "</td></tr><tr><td>",
   row_2_col_2 : "</td><td><img src='",
   row_3 : "'></td></tr><tr><td>",
   table_end : "</td></tr></table><hr />"       
 };

元のコードにテーブルを追加する必要がある場合よりも、この変数をグローバルにします。 

 $('#r_' + car_index).append("<table cellspacing='2' cellpadding='0'><tr><td width='50' align='left' style='font-size:10pt; font-weight:bold'>Lot " + lot_index +"</td></tr></table>");

次のようになります。

 $('#r_' + car_index).append(unit['table_header'] +
                             unit['row_1_col_1'] + "Content in cell 1" +
                             unit['row_1_col_2'] + "Content in cell 2" +
                             unit['row_2_col_1'] + "Content in cell 3" +
                             unit['row_2_col_2'] + "Content in cell 4" +
                             unit['row_3'] + unit['table_end']);

二重引用符と一重引用符に注意してください。また、配列のインデックスを引用符で囲む必要があります (問題が発生した場合は、詳細については JavaScript 配列の使用を参照してください)。

この方法の利点は、テーブルを簡単に変更できることだと思います。単一のオブジェクトを使用するため、行の追加、コンテンツの変更、またはスタイルの変更がはるかに簡単になります。

これが良い方法かどうかもわかりませんが、あなたの考えをもっと聞いてください！ありがとうございました！

于 2012-08-28T19:53:42.220 に答える