Wie Diagonale der Tabelle mit jquery erstellen

Question

Ich möchte Diagonale in meiner Tabelle erstellen. Zum Beispiel, wenn ich die Tabelle 5x5 habe, muss ich die erste Reihe und die erste Spalte in dieser Reihe ergreifen und den Hintergrund dieser Spalte auf rot setzen. Für die zweite Zeile muss ich dasselbe in der zweiten Spalte in der zweiten Zeile tun.

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

Sie sind fast da.

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

Sie können nur prüfen, ob der Zeilenindex der Spaltenindex entspricht einer Diagonale von links oben nach rechts unten zu machen:

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>