Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to stripe rows for a multiple row record using jQuery?
    primarykey
    data
    text
    <p>I am currently using the following jQuery script to highlight rows in my table, and it works great!</p> <pre><code> &lt;script type="text/javascript"&gt; $(document).ready(function() { $('table.grid tbody tr:odd').addClass('alt'); }); &lt;/script&gt; </code></pre> <p>This works great for tables of data where each row is truly a new record, however, I have run into an issue where I have records that take up two rows of data and would like to modify the jQuery so it renders something like:</p> <pre><code>&lt;table&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Col 1&lt;/th&gt; &lt;th&gt;Col 2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Record 1 Field 1&lt;/td&gt; &lt;td&gt;Record 1 Field 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="2"&gt;Record 1 Field 3&lt;/td&gt; &lt;/tr&gt; &lt;tr class="alt1"&gt; &lt;td&gt;Record 2 Field 1&lt;/td&gt; &lt;td&gt;Record 2 Field 2&lt;/td&gt; &lt;/tr&gt; &lt;tr class="alt2"&gt; &lt;td colspan="2"&gt;Record 2 Field 3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Record 3 Field 1&lt;/td&gt; &lt;td&gt;Record 3 Field 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td colspan="3"&gt;Record 1 Field 3&lt;/td&gt; &lt;/tr&gt; &lt;tr class="alt1"&gt; &lt;td&gt;Record 4 Field 1&lt;/td&gt; &lt;td&gt;Record 4 Field 2&lt;/td&gt; &lt;/tr&gt; &lt;tr class="alt2"&gt; &lt;td colspan="4"&gt;Record 2 Field 3&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>How would I accomplish this in jQuery where I want every 3rd row to have a class of 'alt1' and every 4th row to have a class of 'alt2'? </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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