Develop Reference

How do I make a table with styled rows?

How would I create a table like this in css / html?
It seems like I would have to create a table for each row, and then the table would be a table filled with tables as each row...
I can't find anything on google except for rowspan and colspan but these seem to be too strict.
What should I google or look up to learn about creating tables like these?
I will fill each row with data from a database
I have tried googling how to create a styled table but everything that comes up is just a regular table with different colors.
I want to also add functionality to this by having a dropdown menu appear when clicking "message".
Would I just use a tag, or something completely different?

Like so (click "Run snippet" to visually see it):
I used TableTag.net to handle the tedious work of handling the rowspan for me, though:
table {
width: 100%;
}
table, td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 0.25em;
min-width: 30px;
height: 30px;
}
th {
background: #f0e6cc;
}
<table>
<tbody>
<tr>
<td rowspan="3">F</td>
<td rowspan="3">Joe</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Oakland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">D</td>
<td rowspan="3">Tanner</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Birchland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">M</td>
<td rowspan="3">Bret</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>joe#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Palmland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
<tr>
<td rowspan="3">F</td>
<td rowspan="3">Hormon</td>
<td rowspan="2">HT GPA WT SAT</td>
<td>Hormon#email</td>
<td rowspan="3">(youtube goes here)</td>
</tr>
<tr>
<td rowspan="2">Pineland</td>
</tr>
<tr>
<td>Message / Save</td>
</tr>
</tbody>
</table>

How to remove class at serial cells in html tables

Some event were registered in calendar like html tables.
I would like to unregister these event by clicking them.
To realize this,I would like to removeclass continuous cells. like
When we click3or4,then 3,4 cell's class will be removed.
When we click 13or14or15,then 13,14,15 cell's class will be removed.
When we click 9, then only 9 cell's class will be removed.
Is it possible?
and are there any way to realize it?
Thanks
$(function() {
$("td").click(function() {
$(this).removeClass();
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

You can first use .closest() to target the parent tr element then use .find() to target all the element with the class aqua to remove them:
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua{
background-color:aqua;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

If you just change your script like below. Your code will work perfectly according to your requirement.
$(function() {
$("tr").click(function() {
$(this).children().removeClass();
});
});
or else you can change like below as well. It also work perfectly.
$(function() {
$("td").click(function() {
$(this).closest('tr').find('.aqua').removeClass('aqua');
});
});
Best Answer is using second method.

You can simply target only the cells having that aqua class to achieve this, instead of targeting every cell. Then using .closest('tr') find the closest parent tr for the clicked cell and after that using .find('td.aqua') find all the cells having the class aqua and then finally remove the class from each of them.
$(function() {
$("td.aqua").click(function() {
$(this).closest('tr').find('td.aqua').removeClass('aqua');
});
});
td{transition-duration:.5s;border:solid #000 1px;padding:10px;text-align:center}
table{border-collapse:collapse}
.aqua{background-color:#0ff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

if you want to remove aqua class when clicking each row then use this
$(function() {
$("tr").click(function() {
$(this).children().removeClass('aqua');
});
});
OR when clicking on the cells themselves use this
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
$(function() {
$("tr>.aqua").click(function() {
$(this).parent().children().removeClass('aqua');
});
});
td {
transition-duration: 0.5s;
border: solid black 1px;
padding: 5px;
}
table {
border-collapse: collapse;
}
.aqua {
background-color: aqua;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td class='aqua'>3</td>
<td class='aqua'>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td class='aqua'>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td class='aqua'>13</td>
<td class='aqua'>14</td>
<td class='aqua'>15</td>
</tr>
</table>

How do I select all elements of a specific class name?

I have a table within which I want a user to be able to click on any table row, and when they do, it will change the background color of that table row to show that it is highlighted, that's the one that has been selected. I also want them to be able to be able to then select a different table row within that same table, which then should remove the background color from the previous row, and change the newly selected table row to the highlight background color.
So I have
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
I would imagine I would have a CSS class like isSelected or something similar, which would be added to the clicked row, and removed from the previous row that has that class. I'm just not sure how to do it. Anyone able to help?

You idea is correct. You can implement it like following.
$('.clientRow').click(function(){
$('.clientRow.isSelected').removeClass('isSelected');
$(this).addClass('isSelected');
});
.isSelected {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
</table>

On row click, remove selected class from all rows, then add this class to the clicked row:
$(document).on('click', 'tr', function() {
var that = $(this);
that.closest('table').find('tr').removeClass('selected');
that.addClass('selected');
});
table td {
padding:5px 50px;
border:1px solid #d8d8d8;
}
table tr.selected td { background-color: #f1f1f1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tbody>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</tbody>
</table>

Here is a solution using jQuery.
$(function() {
$('.table1 tr').click(function() {
$this = $(this);
$('.table1 tr').removeClass("selected");
$this.addClass("selected");
});
});
table {
border-collapse: collapse
}
td {
cursor: pointer;
padding: 5px 15px;
border: 1px solid grey;
}
tr.selected td {
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>4</td>
<td>Title 4</td>
</tr>
</table>

You might need to do something like this:
$(function() {
// function that adds/removes a css class
var changeBg = function() {
// remove active class from all elements
$('tr, td').removeClass('active');
// add active class to element clicked only
$(this).addClass('active');
};
// bind clicking event to function
$('tr, td').on('click', changeBg);
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
</table>

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>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
</tr>
</tbody>
</table>
CSS:
jQuery code:
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
I would appreciate any help!

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>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
</tr>
<tr>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
</tr>
<tr>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
</tr>
<tr>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
</tr>
<tr>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
</tr>
</tbody>
</table>

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

$('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 >Table</td>
<td bgcolor="#00FF00">$100</td>
</tr>

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>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>

How to Hide an image stored in second TD based on the values of table stored in first TD with JQuery?

I have a 2 columns TABLE with first TD containing another TABLE with 3 rows of contents and second TD with an image as below:-
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Wellness and Care
</td>
</tr>
<tr>
<td align="left">
630 Woodbury Drive
</td>
</tr>
<tr>
<td align="left">
641.613.1450
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Hospital
</td>
</tr>
<tr>
<td align="left">
N/A
</td>
</tr>
<tr>
<td align="left">
641.613.1451
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
</tbody>
</table>
I am trying to disable the image on the second column of the row, if the Value of one of the TD is "N/A". I am stuck at getting the parent TR and going to second TD to do something.
My try is as follows:
$('#myTable tr').each(function () {
if ($(this).find("td").text().trim() == "N/A") {
var cellIndex = $(this).index();
var nextTD = $(this).children('td').eq(1).index();
// I am basically stuck here in getting next TD
}
});
Any help is appreciated!!

DEMO
$('#myTable td:first-child td:contains("N/A")').parents('td').next().find('img').hide();

Try
$( '#myTable td:first-child td:contains("N/A")' ).closest('tr').closest('td').next().find('img').hide()
Demo: Fiddle

What I would do in your case is add a class for your 4 tr tags with text. Then you can just parse through each of those 4 by their class and if one of them is equal to 'N/A' you can grab the image by its ID and hide it.
HTML:
<td class="test" align="left">
Wellness and Care
</td>
JQuery:
$('.test').each(function () {
if($(this).text().trim() == 'N/A') {
$("#imgPhone").toggle();
}
});
JSFiddle: http://jsfiddle.net/ax6Mv/

This should be enough to get you started:
$( '#myTable td:first td' ).each(
function() {
if ( $( this ).text().trim() == 'N/A' ) {
$( '#myTable td' ).eq( 1 ).hide();
}
}
);