I have a 5x5 table, with each cell containing a word. When I click on the word, I want the color of the cell to be updated to a pre-defined color. In the example below, a table is set up with the colors encoded - what I want is them to be white until their corresponding word is clicked.
<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4">
<TR>
<TD BGCOLOR="#ffff00">Yellow</TD>
<TD BGCOLOR="#00ff00">Green</TD>
</TR>
<TR>
<TD BGCOLOR="#ff00ff">Purple</TD>
<TD BGCOLOR="00ffff">Blue</TD>
</TR>
</TABLE>
Using jQuery you could do this:
$('table td').on('click', function() {
$(this).attr("bgcolor", $(this).attr("data-color"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-color="#ffff00">Yellow
<TD data-color="#00ff00">Green
</TR>
<TR>
<TD data-color="#ff00ff">Purple
<TD data-color="00ffff">Blue
</TD>
</TR>
</TABLE>
For a larger project I'd recommend selecting the table by ID.
If you want to use vanilla Javascript you can add a simple onClick event listener and set the color. The color would need to be stored in a data-bgcolor attribute.
const tableCells = document.querySelectorAll('TD')
tableCells.forEach( function (cell) {
cell.addEventListener('click', function (e) {
e.target.style.backgroundColor = e.target.dataset.bgcolor;
})
})
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4>
<TR>
<TD data-bgcolor="#ffff00">Yellow</TD>
<TD data-bgcolor="#00ff00">Green</TD>
</TR>
<TR>
<TD data-bgcolor="#ff00ff">Purple</TD>
<TD data-bgcolor="#00ffff">Blue</TD>
</TR>
</TABLE>
Related
I'm stuck with a challenge to change the background color of td elements based on the th class. Below is the html code, which has th class called bots, I've to change the background color of all the td elements below the bots class.
<table border="1" class="CSSTableGenerator" id="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="bots">J10</th>
<th>J11</th>
<th>J12</th>
<th>J13</th>
</tr>
<tr>
<td>GenerateAlternateTagUrlDroplet</td>
<td>alternateTagConfiguration</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
</tr>
<tr>
<td>AlternateTagUrlDroplet</td>
<td>tagConfiguration</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
</tr>
</table>
Can someone please help me with jquery code to achieve this?
Many Thanks in advance.
You can use map() to return array of indexes with .bots class and then change css of td with same index.
var bots = $('tr th.bots').map(function() {
return $(this).index();
}).get()
$('tr:not(:first) td').each(function() {
if (bots.indexOf($(this).index()) != -1) $(this).css('background', 'blue')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator" id="myTable">
<tr>
<th>Component</th>
<th>Properties</th>
<th class="bots">J10</th>
<th>J11</th>
<th class="bots">J12</th>
<th>J13</th>
</tr>
<tr>
<td>GenerateAlternateTagUrlDroplet</td>
<td>alternateTagConfiguration</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
<td class="trueValue">/com//jec/website/seo/</td>
</tr>
<tr>
<td>AlternateTagUrlDroplet</td>
<td>tagConfiguration</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
<td class="trueValue">/jec/website/seo/</td>
</tr>
</table>
One option would be to do something along the lines of:
Codepen
var nthChild = $('.bots').index() + 1; // Add 1 since index starts at 0
$("td:nth-child(" + nthChild + ")").css("background", 'yellow');
Maybe get all th.bots index and use that to color the tds.
Assuming you have jQuery:
$('th.bots').each(function(){
$('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue');
});
Edit: Excluding other tables on same page
http://codepen.io/anon/pen/PzNZrE
$('th.bots').each(function(){
$(this).parents('table').children().find('td:nth-child('+($(this).index() + 1)+')').css('background-color', 'blue');
});
I'm working with the following HTML:
<tr class="oddrow">
<td>row1</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
</tr>
<tr class="evenrow">
<td>row2</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">-1<br>+1</td>
<td width="50%">WSH: -110<br>SAC: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">
<table>
<tbody>
<tr>
<td width="50%">202.5</td>
<td width="50%">o: -110<br>u: -110</td>
</tr>
</tbody>
</table>
</td>
<td style="text-align:center;">WSH: 0<br>SAC: 0</td>
<!-- The above line is the one I need. --!>
</tr>
There are 2 such rows (row1 and row2), alternating as an oddrow then evenrow. I have the entire HTML as a string in my JavaScript/jQuery code. I also have the information of the two three-letter abbreviations: in this example, WSH and SAC. What I need is the third <td style="text-align:center;"> of the row2 row. I should point out that there are several tables of row1 and row2 on the page, so I need a general selector. What I have been doing is just grabbing all the data in all the rows then parsing it from there, but the inconsistency of the data is making that more difficult. Is there a quick and dirty jQuery that will point me to the data I need?
I was thinking something like $("tr td:contains(" + abbrev + ") td:contains('row2')").text();, but that doesn't get it.
Can anyone help?
Your hierarchy in your selector is wrong, tds with the abbreviation are not an ancestor to the tds with the text of "row2"
You also need to ensure you have apostrophes around your abbrev variable.
Can you try:
$("tr td:contains('row2') td:contains('" + abbrev + "')").text()
Any chance you can add semantic classes instead? These sorts of selectors are gnarly to maintain.
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
I have a table that looks like this:
<table>
<tr>
<td data-col="firstname">Robert</td>
<td data-col="middlename">E</td>
<td data-col="lastname">McIntosh</td>
<td data-col="email">example#gmail.com</td>
<td data-col="title" data-id="123456">Programmer</td>
</tr>
<tr>
<td data-col="firstname">John</td>
<td data-col="middlename">M</td>
<td data-col="lastname">Doe</td>
<td data-col="email">j.m.doe#gmail.com</td>
<td data-col="title" data-id="456789">IT Manager</td>
</tr>
<tr>
<td data-col="firstname">Sue</td>
<td data-col="middlename">L</td>
<td data-col="lastname">Merser</td>
<td data-col="email">s.l.merser#gmail.com</td>
<td data-col="title" data-id="789123">Hates Her Job</td>
</tr>
</table>
I want to add a class labeled title_hide to all td elements that does not contain the a data attribute id equal to 123456?
Javascript I am trying:
$('table tr td:not([data-id="123456"])').closest('tr').addClass('title_hide');
Use :not() selector:
$('td:not([data-id="123456"])').addClass('title_hide');
UPDATE: According to your update it seems that you are trying to add class to <tr> element, which doesn't have <td data-id="123456"> inside. In this case you may use the following approach:
$('tr:not(:has(td[data-id="123456"]))').addClass('title_hide');
DEMO: http://jsfiddle.net/RFwJg/
You can do:
$("table tr td:not([data-id=123456])").addClass("title_hide");
Try not()
$("td:not('[data-col]')").addClass('title_hide');
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('td').not('td[data-id="123456"]').addClass('title_hide');
});
</script>
This is my html table
<table>
<thead>
<tr>
<td class="td20"><h3>Patient Name</h3></td>
<td class="td20"><h3>Summary</h3></td>
<td class="td20"> <h3>Created</h3></td>
<td class="td20"><h3>Last visit</h3></td>
<td class="td20"> <h3>Refer to a Doctor</h3></td>
</tr>
</thead>
<tbody id="patient_table">
<tr id="1">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
<tr id="2">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
</tbody>
</table>
This is my script:
$("#patient_table").click(function(e) {
var id = $(this).children('tr').attr('id');
alert(id);
});
The <tr> is generated dynamically inside the <tbody>.
I need to find the id of <tr> on click of <tr> itself.
With the script I'm always getting the first <tr> id only irrespective of the second <tr> click.
Use this instead:
$("#patient_table").on('click','td',function (e) {
var id = $(this).closest('tr').attr('id');
alert(id);
});
jsFiddle example
Since you mentioned the rows being generated dynamically you want to use .on() to delegate the event handling to the table cells.