基於表格第一行和表格第一列的數據創建表格

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>