Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>To break the table and only have the first 3 columns:</p> <pre><code>newT = jQuery('&lt;tr&gt;&lt;/tr&gt;'); jQuery('.PrintTable table:lt(3)').each( function(i,el){ td = jQuery('&lt;td/&gt;'); td.append(jQuery(el).clone()); newT.append(td); }); jQuery('.PrintTable').html(newT); </code></pre> <p>If you want to keep the first column as a header for further breaks use the <code>:first</code> selector and add it to an intersection of the columns.</p> <pre><code>jQuery('.PrintTable :gt(3):lt(6)') </code></pre> <p>and you’ll get the first column and those between index 3 and 6.</p> <p>You can actually merge the 2 so you only have to change the 2 indices to create the correct tables. <strong>This is the code snipped you’ll need.</strong></p> <pre><code>newT = jQuery('&lt;tr&gt;&lt;/tr&gt;'); jQuery('.PrintTable table:first').add('.PrintTable table:gt(0):lt(3)').each( function(i,el){ td = jQuery('&lt;td/&gt;'); td.append(jQuery(el).clone()); newT.append(td); }); jQuery('.PrintTable').html(newT); </code></pre> <p><strong>Exlanation of code</strong>:</p> <p>newT will hold a new tr element we will add the new tables content to. We will replace the old top tr element with this one.</p> <p>We then select all the sub-tables via <code>.PrintTable table</code>, get the first header column with <code>:first</code> and add further columns selected with <code>:gt(index)</code> and <code>:lt(index)</code> where we pass an index to use. gt = greater than, lt = lower than.</p> <p>We now have all columns we want to use, so we use the <code>each()</code> function to add each element to the prepared <code>td</code>.</p> <p>Afterwards we can swap the old td with the new one to replace the old table with the new one.</p> <hr> <p>What you really want to do though, to make it less obscure table code, improve readability and syntax as well as thus printablility and stylablility is the following:</p> <p>Structure it in one table, as it is just one table of data. Use the <code>&lt;th&gt;</code> tags for headers in non <code>&lt;thead&gt;</code> tags.</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Type Of Transaction&lt;/th&gt; &lt;th&gt;2006&lt;/th&gt; &lt;th&gt;2007&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;td&gt;Andi&lt;/td&gt; &lt;td&gt;tom&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;Age&lt;/th&gt; &lt;td&gt;25&lt;/td&gt; &lt;td&gt;26&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
 

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