Highlighting columns in a table with jQuery - javascript

I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?

Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.

Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");

Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.

Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")

Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")

This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/

Related

Child element isn't being selected properly if used variable inside selector

I am trying to select tbody element of a table but it's not working properly. I have a table -
<table id="dislike_view_<?php some_func(); ?>">
<tr><td>USER</td><td>DATE</td></tr>
<tbody>
<tr><td>aj0ob</td><td>06/05/2018</td></tr>
</tbody>
</table>
I am trying to add html before first child of tbody. But it's adding the html twice. It adds the HTML before first child of table and before first child of tbody. Here's my jquery code -
$('<tr><td>...</td><td>...</td></tr>').prependTo('#dislike_view_'+id+' > tbody');
var id is being called properly, i've tested it with other things. Here's a screenshot of what I am getting -
https://imgur.com/a/pTfgGwk
I only want the html before the first element of tbody.
<table id="someid">
<thead>
<tr><td>USER</td><td>DATE</td></tr>
</thead>
<tbody>
<tr><td>aj0ob</td><td>06/05/2018</td></tr>
</tbody>
</table>
If you want to append a row before first row.
$('<tr><td>...</td><td>...</td></tr>').prependTo('tbody tr:first');
check out this fiddle https://jsfiddle.net/1s8m48t7/

Jquery select first parent of <td> tag in HTML table

I'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?
Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO
Use .siblings() in jquery
$(this).siblings('th.aco').text();
$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().

jQuery finding child elements of <table>?

I am trying to execute a function for each "tr" child element of my "table" with jquery, but this code does not identify the children. I've used this code for "div" based designs before and it works perfectly if I change the "table" and "tr" tags to "div" but it doesn't run here!
This is simple design:
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<table>
<tr align="center">
<input id="btnSearch" type="button" value="Search" />
</tr>
</table>
And this is jquery:
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").children("tr").each(function(){
alert($(this).text);
});
});
});
jsfiddle:
Note that the alert is run just once! And I have also removed the "tr" for children in my jsfiddle to make the code runnable...
could anyone help me?
The tr elements are not children of table, the are children of tbody (or thead or tfoot). The tbody element is automatically created if you don't specify it. You can figure this out easily for yourself if you inspect the generated DOM.
Long story short, either search for all descendants, with .find
$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")
or include tbdoy in your selector:
$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")
That being said, you also have to add the actual content inside td elements, as noted in the other answers.
If you are new to HTML and tables, read the MDN documentation.
There are 2 problems, an invalid html and the selector is wrong
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
then
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").find(">tbody > tr").each(function () {
alert($(this).text());
});
});
});
Demo: Fiddle
Problems were:
tables automatically have tbody elements inserted into the DOM, so you should not reference TR's as children of a TABLE element.
You referenced a non-existant text property instead of the jQuery text() function.
You probably want to reference the tds anyway (and probably only a specific TD in each row), as returning the text of an entire row (TR) seldom makes sense in HTML.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/TdGKj/1/
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch td:first-child").each(function () {
alert($(this).text());
});
});
});
The #tblSearch td:first-child selector basically says: "Find the element with id=tblSearch then search for any td elements that are the first child of their parent. Note I added a second column of dummy TDs cells to the JSFiddle so you could see this in practice.
There any many selectors for choosing specific children, which will vary based on your specific needs, but that just needs a little research of jQuery selectors
You don't need to use children at all. You can just create a selector -
$('#tblSearch tr td')
WORKING DEMO - http://codepen.io/nitishdhar/pen/Aiwgm
First you need to fix your HTML structure, place the child td elements inside each tr -
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>
Now you can alert each value using this javascript snippet -
$(function () {
$('#btnSearch').click(function () {
$("#tblSearch tr td").each(function(){
alert($(this).text());
});
});
});
Note - This will alert each value separately as you needed.
First of all fix up your html and add the correct tags around the cell data
Then this should do what you're wanting:
$('table#tblSearch tr').children().each(function(){
alert($(this).text());
});
You have multiple problems in the question you provided:
Your HTML is not valid; Place a td element inside each tr
Call the correct jQuery function. Instead of using children('tr'), which it won't find because there are no tr that are children to the table element (only tbody,thead, etc), you will need to call the find() jQuery function (e.g. find('td')) and from there you will be able to get the text of the cell; however, you may also be able to find tr and get text of the whole row in that case.

Get ID of first cell in a specific table

Given,
<table id=ThisTable>
<tbody>
<tr>
<td id="ThisCell">
</td>
</tr>
<tr>
<td id="NotThis">
</td>
</tr>
<tr>
<td id="NorThis">
</td>
</tr>
</tbody>
</table
How can I use JQuery/Javascript to assign the ID of the first table cell in #ThisTable to the variable "Selected"?
The result in this case should look like:
var Selected = "ThisCell";
I need to get the first cell's ID without having any knowledge of what the ID is, probably using the :first selector. In addition, this isn't the only table on the page, so it must be referenced with its ID.
var Selected = $('#ThisTable td:first').attr('id');
This selects the first td element that is a descendant of the element with ID ThisTable, returns its id attribute and assigns it to Selected.
JSFiddle
Just:
$("#ThisTable tbody tr:first td:first").attr("id");
This code gets the first td of your table, then stores its id in a variable Selected.
var Selected = document.querySelector("#ThisTable td").id;
Pure DOM methods, fastest method here, and works on 91.71% of browsers according to Can I use.
$(function () {
console.log($($('#ThisTable').find('td')[0]).attr('id'))
});
http://jsfiddle.net/E9mPw/17/

Deleting Row of Table based on div id using JavaScript

Really need your help.
I have a table that can dynamically add and delete row. But the problem is I want to delete the row of the table based on div id. I mean, on one column for every row of table i have div id which are auto increment. Then, I want to delete the row based on the div id. Is that possible?
Thanks a lot.
You can do this really easy with jQuery.
http://jsfiddle.net/KWPWr/1/
$('#d2').closest('tr').remove();
Yes.
$('#row-id').closest('tr').fadeOut(200, function() { $(this).remove(); });
The above will first select the div, then find the table row it exists in, fades it out and the removes it.
If your table looks like this:
<table>
<tbody>
<tr>
<td>
<div id="01"></div>
</td>
</tr>
<tr>
<td>
<div id="02"></div>
</td>
</tr>
</tbody>
</table>
You can use document.getElementById(DIVID).parentNode.parentNode to access the <tr> Element.

Categories