select and unselect td inside an HTML table - javascript

I have a table in my website that I want to be able to select one cell and the background color change, then select another cell (not in the same row) and have the first cell go back to the default color while the newly selected cell change background color. I've looked around and can only seem to find stuff that I've already got or something about a bunch of checkboxes. I have a Fiddle here.
Here's my CSS:
.selected {
background-color: rgba(0,0,0,0.4) !important;
color: #fff;
}
Here's my jquery:
<script type='text/javascript'>//<![CDATA[
$("#table2 td").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$("#table tr").click(function ()
{
$(this).toggleClass('selected').siblings().removeClass('selected');
});
//]]>
</script>
Here's my HTML:
<body>
<table id='table'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</table>
<br><br>
<table id='table2'>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
</tbody>
</table>
</body>
I can get table to work fine selecting and unselecting rows, but table2 doesn't work correctly. I select a cell in one row and then select a cell in the same row and it works, but if I select a cell in another row it does not change the first cell back to the default color. The fiddle above shows what is happening.
I tried adding a <tbody>, but I don't think that I did it correctly as the results did not change.
I tried adding $('.selected').removeClass('selected'); and it partly worked. I can select a cell in one row then select a cell in another row and the background colors change correctly, but if I select the first cell a second time it does not unselect.

The way you select siblings for td is wrong, Try this
$("#table2 tbody td").click(function ()
{
$(this).closest('table').find('td').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
Fiddle

It's not performing as you want in table2 because you're calling the .sibling() method, but expecting it to change elements that aren't siblings. The td's in this row:
<tr>
<td>January</td>
<td>$100</td>
</tr>
are not siblings of the ones in this row:
<tr>
<td>Second Row</td>
<td>Still Second Row</td>
</tr>
Adjust your code inside your click event to something like:
$(this).closest('table').find('td').not(this).removeClass('selected');

You can wrap your header row in <thead></thead> tags and the body rows in <tbody></tbody> tags and then use:
$("#table tbody tr, #table2 tbody tr").click(function() {
$(this).siblings().removeClass('selected').end().addBack().toggleClass('selected');
});
jsFiddle example

Create a css style for the style of your selected cell.
Then toggle that style for each situation (clicked / not clicked) and remove the 'selected' class from the rest of the cells.
CSS
.selected {
color: rgb(252, 69, 69);
}
In Jquery when cell is selected ...
$(function(){
$('body').on('click','table tr',function(e){
e.preventDefault();
$(this).toggleClass('selected').siblings().removeClass('selected');
});
});

Related

Javascript Get the text in a particular table cell in (this) row

I have a table that's created dynamically.
Each row have a button.
When I let on the button on a row I want it to get the text in a particular cell.
Something like this:
I have a table like this:
<table>
<tr>
<td>Test 1 Here</td>
<td>Other Text Here</td>
<td><button onclick="getData(this.cell[1].innerHtml)">Get Data</button></td>
</tr>
</table>
How can I do this using pure javascript or typescript?
I think you are trying to get the first cells text to do that you can use parentNode/childNodes to get a list of all the tds in the row and then pick the one you want by the index.
function getData(x)
{
console.log(x.parentNode.parentNode.childNodes[1].innerHTML)
console.log(x.parentNode.parentNode.childNodes[3].innerHTML)
}
<table>
<tr>
<td>Test 1 Here</td>
<td>Other Text Here</td>
<td><button onclick="getData(this)">Get Data</button></td>
</tr>
</table>
In your setup for the getData function, this will refer to the button that was clicked - buttons don't have a "cell" property.
I would suggest:
<button onclick="getData(this)">Get Data</button>
then
function getData(btn) {
var tr = btn.parentNode.parentNode; // the parent of btn is the td, the parent of td is the tr.
var td = tr.getElementsByTagName("td")[0]; // get the first TD in the TR
console.log(td.innerHTML); // log the content of the TD
}

getting nth-child of parent

I have a table where I need the first two cells of every row clickable (NOT the entire row). When I click the first or the seccond cell, I want to get the value of the third cell of that same row.
To clarify, when I press a1 I want the alert to show c1, If I press b2 I want it to show c2 and If I press c3 I dont want anything to happen.
As you can see, my alert($(this).parent(':nth-child(3)').text()); doesn't work.. how can I achieve this?
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).parent(':nth-child(3)').text()); //Doesn't work
});
td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
</tr>
</table>
you need to use .closest('tr') .. to select parent tr and .find() to select td:nth-child(3)
$('td:nth-child(-n+2)').on("click", function(){
alert($(this).closest('tr').find('td:nth-child(3)').text());
});
Working Demo
Use this
$(this).parent().children(':nth-child(3)').text()
Select the parent and then a child of it.
JsFiddle
You can use
$('td:lt(2)').on("click", function () {
alert($(this).parent().find("td:eq(2)").text()); //Doesn't work
});
Fiddle
lt(2) will get the specified elements whose index is less than 2
eq(2) will select the element whose index is equal to 2
This work for me:
$('table tr').each(function(){
$(this).find('td:lt(2)').on("click", function () {
var text = $(this).parent().find("td:eq(2)").text();
console.log(text);
});
});

JQuery hover out two div

I have two HTML table row, When I hover first tr I want to show this and second tr and when mouse will be out of both tr second tr must be a hide.
How Can I do this using JQuery?
<tr class="pr_td_main pr1">
<td>123</td>
<td>15</td>
</tr>
<tr class="pr_td_desc pr1">
<td colspan="3">description</td>
<td colspan="2">123<br />456</td>
</tr>
Question is very confusing. Do you want the _desc to show when you mouse over the _main?
If that's the case you can do:
$(".pr_td_main").mouseover(function(){
$(this).next(".pr_td_desc").show();
});
And to hide it when user moves his mouse out:
$(".pr_td_desc").mouseleave(function(){
$(this).hide(); //hide this tr
});

Detect only elements in viewport jQuery

I have the following:
<div id="btnL">Left</div>
<div id="btnR">Right</div>
<table id="tab1">
<thead>
<tr>
<td>Item</td>
<td>Price</td>
<td>Descript</td>
</tr>
</thead>
<tbody>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
.
.
.
<tr>
<td>Entry</td>
<td>Entry</td>
<td>Entry</td>
</tr>
</tbody>
</table>
<script>
$("#btnR").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","table-cell");
$("#tab1 thead tr td:nth-child(-n+1).css("display","none");
});
$("#btnL").click(function(e) {
$("#tab1 thead tr td:nth-child(n+2).css("display","none");
$("#tab1 thead tr td:nth-child(-n+1).css("display","table-cell");
});
</script>
The code works as expected, hiding and showing the last element. The issue is there are 20,000 rows in the table and rendering is very slow. I would like to only affect elements in the viewport (+- a few) and as the user scrolls down change the others as opposed to change them all at once.
Assuming you want to hide a particular column. During creation of table attach a class to each td of that column (let's say class is called specialTD).
Make entry in your css like this:
table.hideCol .specialTD { display: none; }
Now whenever you need to hide/show the column, just add/remove the class on the table.
On a side note, your child selector seems incorrect to me.
-n + 1 will only mean first td.
n + 2 will mean every td starting from second.
refer http://css-tricks.com/how-nth-child-works/

Check a table row cell for contents

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/

Categories