CODEWITHSUNDEEP
jquery
Endika Tapia López
Endika Tapia López

Reputation: 29

How to change style of TH with JQuery in two different tables

I have this HTML with two different tables:

<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; border-collapse: collapse;" border="1" rules="all" cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>       
  </tbody>
</table>    
    
<table class="mTabla" id="sdsdsd" style="margin: 0px auto; width: 100%; text-align: left; border-collapse: collapse;" border="1" rules="all" cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>       
  </tbody>
</table>

I need to make the first visible TH element of each table have a border radius. Things to consider: I cannot edit HTML or CSS files, I have been asked to do it only with JQuery and I am lost with it. The IDs of the tables are not those in the code, but anyway they are dynamic.

My jQuery code:

var testimonialElements = $(".mTabla");
for(var i = 0; i < testimonialElements.length; i++){
    $('th:visible:eq(0)').css("border-radius", "6px 0 0 6px");
}

This code makes partially what I need. It applies the style I want to the first visible TH of the first mTable, but it does not apply it to the first visible TH of the second mTable. I need a solution valid for both tables. I would appreciate your help.

Upvotes: 1

Views: 44

Answers (1)

FloPinguin
FloPinguin

Reputation: 379

Here is how you get the border radius applied to the first visible TH of both tables.

$(".mTabla").each(function(){
    $(this).find('th:visible:eq(0)').css("border-radius","6px 0 0 6px");
})

I don't know if it is a good idea to add a border-radius to a TH element, but that isn't the question. :)

Upvotes: 2

Related Questions