Wie kann ich die Hintergrundfarbe eines TD ändern, wenn ein Link in der TD angeklickt wird?

Question

Ich habe versucht zu suchen, aber ich stecke fest. Grundsätzlich mache ich ein gefährliches Spielbrett; was ich mit einer Tabelle erstellt habe. Ich möchte die Hintergrundfarbe des td nach dem Klick ändern. Die Herausforderung, vor der ich stehe, ist, dass (1) ich einen Link verwende, um auf die Frage/Antwort zu verweisen (ja, ich weiß, dass dies auf andere Weise geschehen könnte, aber ich muss mehr lernen und ich arbeite daran); (2) Nachdem ich nach Antworten gesucht habe, kann ich nicht mit dem Code, den ich habe, arbeiten.

Hier ist meine [JSFiddle] https://jsfiddle.net/hLyauL5a/)

Html: 
<table> 
    <thead> 
    <tr> 
     <th>Stuff</th> 
     <th>Stuff </th> 
     <th>Stuff</th> 
     <th>Stuff</th> 
     <th>Stuff</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td><a href="question1.html" id="value">100</a></td> 
     <td><a href="question2.html" id="value">100</a></td> 
     <td><a href="question3.html" id="value">100</a></td> 
     <td><a href="question4.html" id="value">100</a></td> 
     <td><a href="question5.html" id="value">100</a></td> 
    </tr> 
    <tr> 
     <td><a href="question6.html" id="value">200</a></td> 
     <td><a href="question7.html" id="value">200</a></td> 
     <td><a href="question8.html" id="value">200</a></td> 
     <td><a href="question9.html" id="value">200</a></td> 
     <td><a href="question10.html" id="value">200</a></td> 
    </tr> 
    <tr> 
     <td><a href="question11.html" id="value">300</a></td> 
     <td><a href="question12.html" id="value">300</a></td> 
     <td><a href="question13.html" id="value">300</a></td> 
     <td><a href="question14.html" id="value">300</a></td> 
     <td><a href="question15.html" id="value">300</a></td> 
    </tr> 
    <tr> 
     <td><a href="question16.html" id="value">400</a></td> 
     <td><a href="question17.html" id="value">400</a></td> 
     <td><a href="question18.html" id="value">400</a></td> 
     <td><a href="question19.html" id="value">400</a></td> 
     <td><a href="question20.html" id="value">400</a></td> 
    </tr> 
    <tr> 
     <td><a href="question21.html" id="value">500</a></td> 
     <td><a href="question22.html" id="value">500</a></td> 
     <td><a href="question23.html" id="value">500</a></td> 
     <td><a href="question24.html" id="value">500</a></td> 
     <td><a href="question25.html" id="value">500</a></td> 
    </tr> 

    </tbody> 
</table> 


CSS: 



jQuery code: 
$("table tr td").click(function() { 
    $(this).css("background", "#626975"); 
}); 

ich Hilfe schätzen würde!

Answer 1

I sehe zwei Probleme. Erstens, Sie haben jquery oder Ihre Javascript-Datei nicht in Ihren HTML-Code eingefügt. Dein Freund hat keine jquery geladen.

Wenn Sie davon ausgehen, dass das obige Problem nur ein Problem bei der Stapelverarbeitung war, haben Sie nicht darauf gewartet, dass das Dokument geladen wird, bevor Ereignislistener angehängt werden. Der Selektor versucht, etwas auszuwählen, das noch nicht vorhanden ist, und nichts ist angehängt. Was Sie brauchen, ist:

$(document).on('ready', function(){ 
    $("table tr td").click(function(e) { 
    $(this).css("background", "#626975"); 
    }); 
}); 

Arbeitsbeispiel:

$(()=> { 
 
    $("table tr td").click(function() { 
 
    $(this).css("background", "#626975"); 
 
    }); 
 
});

body { 
 
    cursor: pointer; 
 
} 
 
/*gameboard*/ 
 

 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
tr { 
 
    background: #1f293a; 
 
    color: #47ba04; 
 
} 
 
th { 
 
    background: #1f293a; 
 
    color: white; 
 
    font-weight: bold; 
 
    min-width: 200px; 
 
} 
 
td { 
 
    color: #47ba04; 
 
    background: #1f293a; 
 
    min-width: 100px; 
 
    height: 130px; 
 
} 
 
td, 
 
th { 
 
    padding: 6px; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
} 
 
a { 
 
    color: #47ba04; 
 
    text-decoration: none; 
 
} 
 
/* For the question pages*/ 
 

 
#question, 
 
#answers { 
 
    width: 100%; 
 
    height: 800px; 
 
    border: 1px solid black; 
 
    background-color: #1f293a; 
 
    color: white; 
 
    font-weight: bold; 
 
} 
 
div.question h2, 
 
div.answers h2 { 
 
    margin: 0; 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 50%; 
 
    margin-right: -50%; 
 
    transform: translate(-50%, -50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><a href="question1.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question2.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question3.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question4.html" id="value">100</a> 
 
     </td> 
 
     <td><a href="question5.html" id="value">100</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question6.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question7.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question8.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question9.html" id="value">200</a> 
 
     </td> 
 
     <td><a href="question10.html" id="value">200</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question11.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question12.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question13.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question14.html" id="value">300</a> 
 
     </td> 
 
     <td><a href="question15.html" id="value">300</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question16.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question17.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question18.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question19.html" id="value">400</a> 
 
     </td> 
 
     <td><a href="question20.html" id="value">400</a> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><a href="question21.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question22.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question23.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question24.html" id="value">500</a> 
 
     </td> 
 
     <td><a href="question25.html" id="value">500</a> 
 
     </td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Answer 2

$('a').click(function(e){ 
       e.preventDefault(); 
       $(this).parent().css('background-color','blue'); 
      }); 

Also, mit JQuery, wenn Sie auf einen Tag klicken, springen Sie nicht auf, was Link ist, können Sie die Standard-Ereignis zu verhindern, dann bekommt man seine Eltern, die das Element ist, und Sie die CSS-Stil hinzufügen wie gezeigt. Hier ist die HTML, die ich als Beispiel verwendet:

<table> 
 
    <tr> 
 
    <th>Month</th> 
 
    <th>Savings</th> 
 
    </tr> 
 
    <tr> 
 
     <td ><a href="/link">Table</a></td> 
 
    <td bgcolor="#00FF00">$100</td> 
 
    </tr>

Answer 3

Sie können die Links in einem neuen Fenster starten, indem Sie das Hinzufügen target="_blank" Attributs zu Ihrem Anker-Tags:

<td><a href="question1.html" id="value" target="_blank">100</a></td> 

Answer 4

Im Allgemeinen wird ein Hyperlinks wie <a herf="" onclick=""> enthalten zwei Ereignisse: Onclick und herf. Die Reihenfolge der Ausführung --- 'onclick' vor 'herf'. Die onclick-Methode gibt also 'false' zurück, wenn Sie auf einen Hyperlink springen wollen. Der Code ist wie folgt.

$(function(){ 
 
    $("a").on("click",function(){ 
 
    $(this).css("background", "#626975"); 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
     <th>Stuff</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><a href="question1.html" id="value">100</a></td> 
 
     <td><a href="question2.html" id="value">100</a></td> 
 
     <td><a href="question3.html" id="value">100</a></td> 
 
    </tr> 
 
    </tbody> 
 
</table>