1

I hope to get some advise about how to write the javascript and jQuery code more beautiful and gain more readability.

In this case, I hope to insert table inside a list element. Both list and table are added dynamic by using script.

I have some code like this:

 $('#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>");               
  }

As I write in the comments of above code. I could use append method and put a lot of HTML code in there. However it really looks ugly... and in the above example, I just added one row in the list. In the final goal, I have to add three rows, with about 6 cells. Each cell will have their own style set for the content. It will really be a mess.

Any advice will be appreciate! Thank you!

Arthur0902
  • 209
  • 3
  • 14

3 Answers3

0

Perhaps use templating via either Mustache or jQuery.

See more: What Javascript Template Engines you recommend?

Community
  • 1
  • 1
Royce Feng
  • 1,663
  • 1
  • 10
  • 6
  • Thanks for the reply! I was thought about that too. Until I thought some notes on jQuery's web page...:"Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready." which from:http://api.jquery.com/category/plugins/templates/ – Arthur0902 Aug 28 '12 at 17:18
  • And by the way... That downvote is not from me....I am still thank you for your efforts :) – Arthur0902 Aug 28 '12 at 17:46
0

try this, coz $('#Items ul').append("<li id='r_" + car_index +"'></li>); is not enclosed between " "

$('#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>");               
  }
Shreedhar
  • 5,502
  • 3
  • 22
  • 27
  • for append(), you need to pass the parameter which is enclosed in quotes. e.g: append("something"), but in your case that string is not enclose properly. – Shreedhar Aug 28 '12 at 17:27
  • Oh, sorry, that was a typing error...It was enclosed in the actual code.:) Thanks for point out! The purpose for this post is try to find a better way to append table or other stuff into HTML using jQuery. Not as the .append("a long long long long long and mess mess mess mess") line. – Arthur0902 Aug 28 '12 at 17:36
  • Hi @shreedhar, there was no error in the code, it could be run and display what it should. I just thought...don't u think this is too ugly and not easy to read and maintenance? I just added on row only. If I have to add more rows and cells, the append function's content will nearly unable to look at. So I hope if there is a better way to do this kind of thing. To write a bit clear and nice code :) Thank you! – Arthur0902 Aug 28 '12 at 17:45
0

Alright...After some thought, I find a way which will be more clear to write this kind of code. I'm not sure if this is the goog choice since it will require more work...but I feel it is better to write this way.

The idea is really simple, create object to store the HTML tags which will fixed for every block. As my example, it is a table will repeated every time a list will be added. So why not store all fixed table tags and their style attribute into one array like object?

 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 />"       
 };

Make this variable global, than when you need to add table, the original code: 

 $('#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>");

Will become like this:

 $('#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']);

Just be careful about double quote sign and single quote sign, and also, the array's index need to be quoted(see javascript array's use for detail if you got problem).

I think the advantage of this method is much more easy to modify the table. Add row, change content, or change style make much more easy since it use the single object.

I also not sure if this is a good way or not, hope to hear more about your thought! Thank you!

Arthur0902
  • 209
  • 3
  • 14