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 代码。然而它看起来真的很丑……在上面的例子中，我只是在列表中添加了一行。在最终目标中，我必须添加三行，大约 6 个单元格。每个单元格都有自己的内容样式集。真的会一团糟。

任何建议将不胜感激！谢谢！

4

3 回答 3

0

好吧...经过一番思考，我找到了一种更清晰的方法来编写这种代码。我不确定这是否是 goog 的选择，因为它需要更多的工作......但我觉得这样写更好。

这个想法非常简单，创建对象来存储将为每个块固定的 HTML 标签。作为我的示例，每次添加列表时都会重复一个表。那么为什么不将所有固定的表格标签及其样式属性存储到一个类似对象的数组中呢？

 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 回答
0

也许通过Mustache或jQuery使用模板。

查看更多：您推荐哪些 Javascript 模板引擎？

于 2012-08-28T17:17:30.933 回答
0

试试这个，因为 $('#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 回答