javascript - jQuery 可读性 : insert table inside element

Question

我希望得到一些关于如何编写更美观的 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>");               
  }

正如我在上面代码的注释中所写的那样。我可以使用追加方法并在其中放入大量 HTML 代码。然而它看起来确实很难看......在上面的例子中，我只是在列表中添加了一行。在最终目标中，我必须添加三行，大约有 6 个单元格。每个单元格都有自己的内容样式集。真的会很乱。

如有任何建议，我们将不胜感激!谢谢!

Answer 1

也许可以通过 Mustache 使用模板或jQuery .

查看更多:What Javascript Template Engines you recommend?