Question

我通过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，没有任何缩进使得它更容易阅读，看起来或试图找到一些东西是痛苦的。

感谢你能指出我更好的策略！谢谢！

Answer 1

如果你必须如你所描述的那样写出你的HTML，你可以在每一行之后为你的标记添加换行符。

var myHTML = '<div class="bleh"> \
     <ul class="bleh2"> \
         <li>'+ data.order_number +'</li> \
         <li>'+ data.order_date +'</li> \
     </ul> \
  </div>';

Answer 2

如果从服务器代码（而不是HTML字符串）传递对象数组，则可以使用JavaScript循环遍历数组，获取数组中对象的每个属性。

每次迭代$.append html进入#modal-div。

类似的东西：

for (int i = 0: i<msg.d.length; i++) {

    var order_number = msg.d[i].order_number;
    ...

    $('#modal-div').append('<li>'+order_number +'</li>');
}

Answer 3

您可以将HTML中的＃modal-div标记为具有特定ID的模板，并在显示模态窗口之前替换为实际数据。

example

<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();
  });
});

将ajax数据放入html并在页面上显示的最佳方法

3 个答案: