javascript - 根据表的第一行和表的第一列中的类向表的行和类添加类

Question

我想使用jQuery根据类第一行和第一列将“类”添加到表格的其他行和列。例如:

我当前的 HTML 代码是:

<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>

我希望我的代码在单击按钮时显示:

<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>

我的 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]);
       }
   }
});

这是我的Fiddle

Answer 1

您可以按照以下方式进行操作。

$('.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