0

jquery/ajax/php get を使用して、かなりの量の json データを読み込んでいます。データを取得したら、ポップアップするモーダルのいくつかのテーブルに表示します。そして、私はそれをこのようにやっています。

str1  = "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label' >";
str1 += "Order no.";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data' id='order_number_td'>";
str1 += data.order_number;
str1 += "</td></tr>";
str1 += "</table>";

str1 += "</td>";
str1 += "<td>";

str1 += "<table class='line_item_order_info_table'>";
str1 += "<tr><td class='line_item_label'>";
str1 += "Order date";
str1 += "</td></tr>";
str1 += "<tr><td class='line_item_data'>";
str1 += data.order_date;
str1 += "</td></tr>";
str1 += "</table>";

//many, many more lines that look like this

$('#modal-div').html(str1);

これは、javascript を介してこのデータを html に入れる最良の方法ですか? このように追跡するのはちょっと難しいです。これほど多くの html は、読みやすくするためのインデントがどこにもないため、見たり、何かを見つけようとしたりするのはちょっと面倒です。

より良い戦略の方向性を教えていただければ幸いです。ありがとう！

4

3 に答える 3

1

HTMLで＃modal-divを特定のIDを持つテンプレートとしてマークアップし、モーダルウィンドウを表示する前に実際のデータに置き換えることができます。

例

<div id="modal-div">
<table class='line_item_order_info_table'>
  <tr>
    <td class='line_item_label' >Order Number</td>
    <td id="order_num">order_num</td>
  </tr>
  <tr>
    <td class='line_item_label'>Order date</td>
    <td id="order_date">order_date</td>
  </tr>
</table>
</div>

$(document).ready(function(){
  var data ={"ordernumber":"123", "orderdate":"12/01/1999"};
  $('#modal-div').hide();
  $('#submit').click(function(){
    $('#order_num').html(data.ordernumber);
    $('#order_date').html(data.orderdate);
    $('#modal-div').show();
  });
});
于 2012-05-16T15:17:48.703 に答える
1

説明したように HTML を書き出す必要がある場合は、マークアップの各行の後に行エスケープを追加するだけです。

var myHTML = '<div class="bleh"> \
     <ul class="bleh2"> \
         <li>'+ data.order_number +'</li> \
         <li>'+ data.order_date +'</li> \
     </ul> \
  </div>';
于 2012-05-16T14:43:28.897 に答える