I know this is a easy fix, I'm doing something wrong...

I've selected multiple tables and tried to use each for applying
cornering to each table. Inside the callback function, I try to find
the first/last table cells to apply cornering for each corner.
However, when there are multiple tables it looks at _all_ the tr
elements for the first/last rows. See example code:

// Add cornering to tables
$('table.corner-me').addClass('ui-corner-all').each(function(){
    var $table = $(this);
    $table.find('tr:first :first-child').addClass('ui-corner-tl');
    $table.find('tr:first :last-child').addClass('ui-corner-tr');
    $table.find('tr:last :first-child').addClass('ui-corner-bl');
    $table.find('tr:last :last-child').addClass('ui-corner-br');
});


<table class="corner-me">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data A1</td>
    <td>Data B1</td>
  </tr>
  <tr>
    <td>Data A2</td>
    <td>Data B2</td>
  </tr>
</table>

<table class="corner-me">
  <tr>
    <td>Data A1</td>
    <td>Data B1</td>
  </tr>
  <tr>
    <td>Data A2</td>
    <td>Data B2</td>
  </tr>
  <tr>
    <td>Data A3</td>
    <td>Data B3</td>
  </tr>
</table>

Reply via email to