Add class to rows and class of a table based on the class in the first row of the table and first column of the table

Question

I want to use jQuery to add "class" to the other rows and columns of the table based on the class first row and the first column. For example:

My current HTML code is:

<table class="numAlpha" border="1">
   <tr>
      <th bgcolor="#ff9999"></th>
      <th class="alpha a" bgcolor="#5588bb">a</th>
      <th class="alpha b" bgcolor="#5588bb">b</th>
      <th class="alpha c" bgcolor="#5588bb">c</th>
      <th class="alpha d" bgcolor="#5588bb">d</th>
      <th class="alpha e" bgcolor="#5588bb">e</th>
   </tr>
   <tr>
      <td class="num 1" bgcolor="#5588bb">1</td>
      <td name="classAdd">Dexter</td>
      <td name="classAdd">Rita</td>
      <td name="classAdd">Astor</td>
      <td name="classAdd">Cody</td>
      <td name="classAdd">Harrison</td>
   </tr>
   <tr>
      <td class="num 2" bgcolor="#5588bb">2</td>
      <td name="classAdd">Debra</td>
      <td name="classAdd">Quinn</td>
      <td name="classAdd">Angel</td>
      <td name="classAdd">LaGuerta</td>
      <td name="classAdd">Masuka</td>
   </tr>
   <tr>
      <td class="num 3" bgcolor="#5588bb">3</td>
      <td name="classAdd">Chuck</td>
      <td name="classAdd">Sarah</td>
      <td name="classAdd">Casey</td>
      <td name="classAdd">Ellie</td>
      <td name="classAdd">Awesome</td>
   </tr>
   <tr>
      <td class="num 4" bgcolor="#5588bb">4</td>
      <td name="classAdd">Castle</td>
      <td name="classAdd">Kate</td>
      <td name="classAdd">Espisito</td>
      <td name="classAdd">Ryan</td>
      <td name="classAdd">Captain</td>
   </tr>
   <tr>
      <td class="num 5" bgcolor="#5588bb">5</td>
      <td name="classAdd">Bones</td>
      <td name="classAdd">Booth</td>
      <td name="classAdd">Hodgins</td>
      <td name="classAdd">Angela</td>
      <td name="classAdd">Sweets</td>
   </tr>
</table>

I want my code to show on button click:

<table class="numAlpha" border="1">
   <tr>
      <th bgcolor="#ff9999"></th>
      <th class="alpha a" bgcolor="#5588bb">a</th>
      <th class="alpha b" bgcolor="#5588bb">b</th>
      <th class="alpha c" bgcolor="#5588bb">c</th>
      <th class="alpha d" bgcolor="#5588bb">d</th>
      <th class="alpha e" bgcolor="#5588bb">e</th>
   </tr>
   <tr>
      <td class="num 1" bgcolor="#5588bb">1</td>
      <td name="classAdd" class="1a">Dexter</td>
      <td name="classAdd" class="1b">Rita</td>
      <td name="classAdd" class="1c">Astor</td>
      <td name="classAdd" class="1d">Cody</td>
      <td name="classAdd" class="1e">Harrison</td>
   </tr>
   <tr>
      <td class="num 2" bgcolor="#5588bb">2</td>
      <td name="classAdd" class="2a">Debra</td>
      <td name="classAdd" class="2b">Quinn</td>
      <td name="classAdd" class="2c">Angel</td>
      <td name="classAdd" class="2d">LaGuerta</td>
      <td name="classAdd" class="2e">Masuka</td>
   </tr>
   <tr>
      <td class="num 3" bgcolor="#5588bb">3</td>
      <td name="classAdd" class="3a">Chuck</td>
      <td name="classAdd" class="3b">Sarah</td>
      <td name="classAdd" class="3c">Casey</td>
      <td name="classAdd" class="3d">Ellie</td>
      <td name="classAdd" class="3e">Awesome</td>
   </tr>
   <tr>
      <td class="num 4" bgcolor="#5588bb">4</td>
      <td name="classAdd" class="4a">Castle</td>
      <td name="classAdd" class="4b">Kate</td>
      <td name="classAdd" class="4c">Espisito</td>
      <td name="classAdd" class="4d">Ryan</td>
      <td name="classAdd" class="4e">Captain</td>
   </tr>
   <tr>
      <td class="num 5" bgcolor="#5588bb">5</td>
      <td name="classAdd" class="5a">Bones</td>
      <td name="classAdd" class="5b">Booth</td>
      <td name="classAdd" class="5c">Hodgins</td>
      <td name="classAdd" class="5d">Angela</td>
      <td name="classAdd" class="5e">Sweets</td>
   </tr>
</table>

my jQuery:

var numbers = new Array();
var alphas = new Array();

$('.exportBtn').click(function(event) {
   $('.numAlpha .alpha').each(function() {
       alphas.push(($(this).attr('class')).slice(6));
   });

   $('.numAlpha .num').each(function() {
       numbers.push(($(this).attr('class')).slice(4));
   });

   for (i = 0; i <= numbers.length; i++) {
       for (j = 0; j = < alphas.length; j++) {
           alert(numbers[i] + "," + alphas[j]);
       }
   }
});

This is my Fiddle

Answer 1

here is a solution based on html tag th/td

var alphas = [];
var num;

$('.exportBtn').click(function(event) {

    $('.numAlpha th').each(function(i, el) {

        if($(el).attr('class'))
            alphas.push($(el).attr('class').slice(6));

   });

   $('.numAlpha td').each(function(i, el) {

       if($(el).attr('class')){
           num = $(el).attr('class').slice(4);
       }else{
           $(el).addClass(num + alphas[(i-1)]);
       }

   });
});

Answer 2

I was going to suggest a slightly different approach. Since you already know the column names and I'm assuming the columns are numbered sequentially, this code would work (demo):

$(function() {
  var alphas = ['a', 'b', 'c', 'd', 'e'];

  $('.exportBtn').click(function() {
    console.log('ok');
    var i, j,
      $table = $('.numAlpha'),
      // ignore first row
      $rows = $table.find('tr:gt(0)'),
      // get number of columns
      columns = alphas.length,
      len = $rows.length;
    for (i = 0; i < len; i++) {
      for (j = 0; j < columns; j++) {
        // use j+1 to skip first column
        $rows.eq(i).find('td')[j+1].className = alphas[j] + (i+1);
      }
    }
  });
});

Note: bgcolor works, but is no longer supported in most browsers. So use css instead

th, td:nth-child(1) {
  background: #5588bb;
}

th:nth-child(1) {
  background: #ff9999;
}

Answer 3

You can do it like following.

$('.exportBtn').click(function(event) {
    var first = $('.numAlpha th.alpha').map(function() {
         return $(this).attr('class').split(' ')[1];
    }).get();

    $('.numAlpha tr').not(':first').each(function() {
        var num = $(this).find('td:first').attr('class').split(' ')[1];

        $(this).find('td').not(':first').each(function(i) {
            $(this).addClass(num + first[i]);
        });
    });
});

UPDATED FIDDLE