根據表的第一行和表的第一列中的數據創建表

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循環是否工作正常或應該添加什么。

這是我的小提琴

請幫忙！

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>