Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Interesting exercise. This does what you ask, however it might not be exactly what you want. But it tells you how it can be done. You can </p> <p>tweak it to where it works the way you expect.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt; &lt;head&gt; &lt;title&gt;Example of restructuring tables&lt;/title&gt; &lt;script src="Scripts/jquery-1.2.6.commented.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;!--&lt;body&gt;&lt;table id="Table1"&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;--&gt; &lt;table id="myTable"&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;4&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { debugger; var tds = $("#myTable tr td"); // gets all td elements in the table with id myTable var col1 = $("&lt;tr&gt;&lt;/tr&gt;"); // holds our first row's columns var col2 = $("&lt;tr&gt;&lt;/tr&gt;"); // holds our second row's columns var halfway = Math.ceil(tds.length / 2); // add the first half of our td's to the first row, the second half to the second for (var i = 0; i &lt; tds.length; i++) { if (i &lt; halfway) col1.append(tds[i]); else col2.append(tds[i]); } // clear out the clutter from the table $("#myTable").children().remove(); // add our two rows $("#myTable").append(col1); $("#myTable").append(col2); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>See, your example of how you wanted it to end up put everything in two rows, yet your question said "two columns". I did two rows just because it was easier. You just need to modify the for loop so that its more along this line</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload