CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lisa Thompson
Lisa Thompson

Reputation: 3

How can I change the background color of a td when a link in the td is clicked?

I have tried searching, but I am stuck. Basically I am making a jeopardy game board; which I created using a table. I would like to change the background-color of the td after it has been clicked on. The challenge I am facing is that (1) I am using a link to direct to the question/answer (yes, I know this could be done other ways, but I need to learn more to advance and I am working on that); (2) After searching for answers, I can't seem to get it to work with the code I have.

Here is my [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");
});

I would appreciate any help!

Upvotes: 0

Views: 666

Answers (4)

sept08
sept08

Reputation: 345

Generally, a hyperlinks like <a herf="" onclick="">contain two events: onclick and herf. The order of execution --- 'onclick' in front of 'herf'. so making onclick method return 'false' if you want to page can't jump on whatever link it is when you click hyperlink. Code is as follows.

$(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>

Upvotes: 0

Matt Broatch
Matt Broatch

Reputation: 731

I see two problems. One, you have not included jquery or your javascript file in your html. Your jsfiddle does not have jquery loaded.

Two, assuming the above was just a problem getting your question across on Stack Overflow, you haven't waited for the document to load before attaching event listeners. The selector tries to select something that isn't there yet, and nothing is attached. What you need is:

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

Working example:

$(()=> {
  $("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>

Upvotes: 2

Salvo
Salvo

Reputation: 561

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

So,using JQuery, if you click on an tag, don't jump on whatever link it is, you prevent the default event, then you get its parent which is the element and you add the css style as shown. Here is the html that I used as an example:

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

Upvotes: 1

Shadi Shaaban
Shadi Shaaban

Reputation: 1720

You could launch the links in a new window by adding target="_blank" attribute to your anchor tags:

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

Upvotes: 1

Related Questions