javascript - 根据表格第一行第一列的数据创建表格

Question

我想使用 jQuery 根据第一行和第一列创建一个表格。我希望我的 table 看起来像这样:

这是我的 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></td>
<td></td>
<td></td>
<td></td>
<td></td>       
</tr>
<tr>
    <td class="num 2" bgcolor="#5588bb">2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>       
</tr>
<tr>
   <td class="num 3" bgcolor="#5588bb">3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>       
</tr>
<tr>
    <td class="num 4" bgcolor="#5588bb">4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>   
</tr>
<tr>
    <td class="num 5" bgcolor="#5588bb">5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>   
</tr>
</table>

jQuery

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

$('.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++) {
        }
    }

顶行和第一列有类。

我不确定我的 for 循环是否正常工作或者我应该在其中添加什么。

这是我的Fiddle

请帮忙!

Answer 1

试试这个:

$(function() {
  var alphas = [];
  
  $.each($('th'), function(key, value) {
    if ($(value).text())
      alphas.push($(value).text());
  });
  
  $.each($('tr'), function(key, value) {
    var ctr = $(value);
    var numb = ctr.find('td:first').text();
    
    if (numb)
      for (var i = 1; i < ctr.find('td').length; i++)
        ctr.find('td').eq(i).text(alphas[i-1] + numb);
  });
});

table {
  width: 100%
}

th, td {
  width: (100 / 6)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="num 2" bgcolor="#5588bb">2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="num 3" bgcolor="#5588bb">3</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="num 4" bgcolor="#5588bb">4</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="num 5" bgcolor="#5588bb">5</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>