pedmillon pedmillon - 2 months ago 22
HTML Question

jQuery table row divider

I have an HTML table where the first column value represents a group A, B, C, ... and I'd like to divide each group by giving the last row of each group a border, so in the following example the 2nd and 3rd rows (or the child td elements to be exact) will have a border-bottom style set.

<tr><td>A</td><td>4654</td><td>ABAB</td></tr>
<tr><td>A</td><td>498</td><td>JOI</td></tr>
<tr><td>B</td><td>165</td><td>FTY</td></tr>
<tr><td>C</td><td>798</td><td>KPO</td></tr>


Is there any simple way to do that in jQuery?

EDIT: to make it clear, I include a picture
enter image description here

Answer

From you question, you want to change the style of each <td> on middle <tr> tags ie you mentioned, "child td elements". I'll give you a starting point to work on.

$('table tr').not(":first").not(":last").find("td:last").css("borderBottom", "1px black solid");

Above query first get all the <tr>s and the drops the first and last. Then it goes on to select all <td>s on <tr> that is left. Finally applys the border bottom css. Please look at Jquery not function to deselect first and last from the query. Example: https://jsfiddle.net/0fhsdfbr/

Updated:

There is no built in way to do this as far as I know. You need to write it. Following code go through each <tr> tag. If previous tags first 's content is different than current 's 's content, then it adds a bottom border to child <td>s.

$('table tr').each(function(index, item){
    //Checks if the contents of previous td differ from current
    if($(item).find("td:first").text() != $(item).prev().find("td:first").text()){
        // If so, underline it
        $(item).prev().find("td").css("borderBottom", "1px black solid");
  }
});

Fiddle Example: https://jsfiddle.net/0fhsdfbr/2/