fast jquery code to make a 3-column display HTML table

I have many pages where I get data entry forms such that one HTML row per field. Like:

<tr>
  <td>Label 1</td>
  <td>Field 1, could be text, select list or even fckeditor  </td>
</tr>
<tr>
  &l开发者_运维问答t;td>Label 2</td>
  <td>Field 2, could be text, select list or even fckeditor  </td>
</tr>
... and so on

I want to write a fast jquery each loop that traverses through entire table rows and convert it into a 6 column display so that my web page appears neat and make good use of space. And there are special fields marked with a class say, <td class='special">Special field</td> that should be kept out of this operation and should stay single row field (instead of 3 per row).

I've written the code and it works but it gives me "slow javascript" message when I've huge listboxes coming in the fields in many rows. Can somebody share a code snippet to achieve this faster w/o doing too much insertion/deletion in the DOM?

If you absolutely have to do it front-end, while I agree with the other commenter that you should do this on the backend... here's one way to do it:

http://jsfiddle.net/JHQEy/3/