Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Assuming you have some HTML like so:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr class="th"&gt; &lt;td&gt;Some header&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some data&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some more data&lt;/td&gt; &lt;/tr&gt; &lt;tr class="th"&gt; &lt;td&gt;Another header&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some data&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some more data&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>Then I assume you want the resultant HTML to look like this:</p> <pre><code>&lt;table&gt; &lt;tbody&gt; &lt;tr class="th"&gt; &lt;td&gt;Some header&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some data&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some more data&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;A new bit of data in a new row&lt;/td&gt; &lt;/tr&gt; &lt;tr class="th"&gt; &lt;td&gt;Another header&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some data&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Some more data&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>In that case, you could use the following jQuery:</p> <pre><code>var headerRows = $('tr.th'); if(headerRows.length &gt; 1) { var headerRow = headerRows.get(1); $(headerRow).before('&lt;tr&gt;&lt;td&gt;A new bit of data in a new row&lt;/td&gt;&lt;/tr&gt;'); } else if(headerRows.length == 1) { var headerRow = headerRows.get(0); $(headerRow).closest('tbody').append('&lt;tr&gt;&lt;td&gt;A new bit of data in a new row&lt;/td&gt;&lt;/tr&gt;'); } else { // no header rows - do nothing? } </code></pre> <p><a href="http://jsfiddle.net/anthonygrist/3QFvs/" rel="nofollow"><strong>Working DEMO</strong></a></p> <p>Or, a fiddle that adds a new row before the next <code>&lt;tr&gt;</code> element with the class <code>th</code> when a <code>&lt;tr&gt;</code> element with the class <code>th</code> is clicked on: <a href="http://jsfiddle.net/anthonygrist/3QFvs/1/" rel="nofollow"><strong>Updated DEMO</strong></a></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