テーブルの最初の行とテーブルの最初の列のデータに基づいてテーブルを作成

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>