Farbe onclick TD rot und die angeschlossenen tds grau

Wenn ich auf einen TD klicke, muss ich die Hintergrundfarbe rot machen, und die 4 tds, die damit verbunden sind, müssen die Hintergrundfarbe grau bekommen. Wenn ich auf einen anderen TD klicke, müssen die vorherigen tds wieder weiß werden und der neue td muss rot und die anderen grau sein.Farbe onclick TD rot und die angeschlossenen tds grau

Rechts, links, oben und unten am RED TD muss die Farbe grau sein. Auch der vorherige Klick TD muss bleiben, aber wenn ich auf einen anderen td klicke, muss der erste weggehen.

Dies ist, was ich bereits:

HTML

<table> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     </table>

JQuery

$('document').ready(function(){ 
    $('td').click(function(){ 
     var $this = $(this); 
     var col = $this.index() + 1; 
     var row = $this.closest('tr').index() + 1; 

     $(this).css('background-color', 'red') 
     $('p').text('Je zit nu in kolom ' + col + ' en in rij ' + row); 
    }) 
});

Quelle

2016-05-17 Kip Verslaafde

So etwas wie diese

$('document').ready(function() { 
 
    var $td = $('td').click(function() { 
 
    if ($(this).hasClass('grey')) { 
 
     alert("can't click"); 
 
    } else { 
 
     var $this = $(this); 
 
     var col = $this.index() + 1; 
 
     var row = $this.closest('tr').index() + 1; 
 

 
     $td.removeClass('red grey'); // set all td's color white 
 

 
     $('tr:nth-child(' + (row - 1) + '),tr:nth-child(' + (row + 1) + ')') 
 
     .find('td:nth-child(' + col + ')') // get the clicked column td's 
 
     .addClass('grey'); 
 

 
     $(this).addClass('red') // set clicked td's color red 
 
     .parent() 
 
     .find('td:nth-child(' + (col - 1) + '),td:nth-child(' + (col + 1) + ')') 
 
     .addClass('grey'); // set color to grey 
 

 
     $('p').text('Je zit nu in kolom ' + col + ' en in rij ' + row); 
 
    } 
 
    }) 
 
});

td { 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.grey { 
 
    background-color: grey 
 
} 
 
.red { 
 
    background-color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table border=1> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table> 
 
<p></p>

Quelle

2016-05-17 11:13:18

Die unter TD, links, rechts, über dem roten TD muß die Farbe Grau zu erhalten. –

@KipVerslaafde das hast du in deiner Frage nicht klargestellt. – Turnip

@PranavCBalan danke, aber ich brauche nur die ersten Tds verbunden und nicht die ganzen Zeilen. Also nur 4 andere TDS müssen grau färben. –

$('document').ready(function() 
{ 
    $('td').click(function() 
    { 
     var row = $(this).closest('tr'); 

     $(row).find('td').css('background-color', 'grey'); 
     $(this).css('background-color', 'red'); 
    }) 
});

JSFiddle

Quelle

2016-05-17 11:13:31 Steveo

Farbe onclick TD rot und die angeschlossenen tds grau

Antwort

Verwandte Themen