테이블의 첫 번째 행과 테이블의 첫 번째 열의 데이터를 기반으로 테이블 만들기

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>