根据表的第一行和表的第一列中的数据创建表

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

Answer 2

这是另一种方法！

$(function() {
  var rows = $('.numAlpha tr').map(function(i, v) {
    return $(v).find('td:first-child').text();
  });

  var cols = $('.numAlpha th').map(function(i, v) {
    return $(v).text();
  });

  for (i = 1; i < rows.length; i++) {
    for (j = 1; j < cols.length; j++) {
      $('.numAlpha tr:eq(' + i + ') td:eq(' + j + ')').text(rows[i] + cols[j]);
    }
  }
});

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