jqueryを使用してテーブルの対角を作成する方法

Question

テーブルに対角線を作成したいと思います。例えば、私はテーブル5x5を持っている場合、私はこの行の最初の行と最初の列を取得し、赤色にthic列の背景を設定する必要があります。 2番目の行については、2番目の行の2番目の列で同じことをする必要があります。

var cols = 6, 
 
    rows = 6; 
 

 
for (r = 0; r < rows; r++) { 
 
    var row = $('<tr></tr>') 
 
    $('table').append(row); 
 

 
    for (c = 0; c < cols; c++) { 
 
    var col = $('<td></td>'); 
 
    row.append(col); 
 
    $(col[r][c]).addClass('kolorek') 
 
    } 
 
}

table td { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid; 
 
} 
 

 
.kolorek { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
</table>

Here is a fiddle

Answer 1

あなたはほとんどそこにいます。

var cols = 6, 
 
\t rows = 6, 
 
    $table = $('table'); // Caching the table, because this will be called many times (perf improvement) 
 
    
 
    for (r = 0; r < rows; r++) { 
 
    \t var row = $('<tr></tr>') 
 
    \t 
 
     for(c = 0; c < cols; c++){ 
 
     \t var col = $('<td></td>') 
 
     if(c==r) col.addClass('kolorek') // col[r][c] is undefined. This matches the same column and row numbers 
 
     row.append(col) 
 
     } 
 
     $table.append(row); 
 
    }

table td { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid; 
 
} 
 

 
.kolorek { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table></table>

Answer 2

行インデックスが右下に左上から斜めのラインを作るために列インデックスに等しい場合は、単にチェックすることができます。

var cols = 6, 
 
    rows = 6; 
 

 
for (r = 0; r < rows; r++) { 
 
    var row = $('<tr></tr>') 
 
    $('table').append(row); 
 

 
    for (c = 0; c < cols; c++) { 
 
    var col = $('<td></td>'); 
 
    row.append(col); 
 

 
    if (r == c) col.addClass('kolorek'); // add this in place of your current kolerik adder 
 
    } 
 
}

table td { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid; 
 
} 
 

 
.kolorek { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 

 
</table>

を