We Keep Coding

javascript - select nodes and all their child nodes inside tbody

I want to select all elements inside < tbody > and all their sub-elements so i can change a class using javascript.
For example, i want to change the class cl1 into cl2 in the following example
<table>
<thead>
....
</thead>
<tbody id="my-table">
<tr class="cl1 other-class">
<td>Some value</td>
<td class="cl1 other-class">Some value</td>
<td>Some value</td>
</tr>
<tr class="cl1 other-class">
<td class="cl1 other-class">Some value</td>
<td>Some value</td>
<td>
<a class="cl1 link" href="#">Some link</a>
</td>
</tr>
</tbody>
I want to use javascript for this, no jQuery
i managed to select all elements inside < tbody > like this :
document.getElementById("my-table").tBodies.item(0)
but i didn't know how to select each of their sub-elements or their sub-sub-elements.
for changing the class, i know i can use regular expressions to replace the class

Possible duplicate How to select all children of an element with javascript and change CSS property?
try (add an id to your tbody to make this work)
var descendants = document.getElementById('tbody').getElementsByTagName("*");
for(var i = 0; i < descendants.length; i++) {
descendants[i].classList.remove('cl1');
descendants[i].classList.add('cl2');
}

You said you managed to select <tbody> element, but you wanted to know how to select it's sub-elements or their sub-sub-elements. You do that with the children property which each element has. So this line gives you all children of <tbody> which are the <tr> (rows):
document.getElementById("my-table").tBodies.item(0).children;
Then if you get the children of each row, you get the cells. Example:
var tbody = document.getElementById("my-table").tBodies.item(0);
var rows = tbody.children;
var row1cells = rows[0].children;
var row2cells = rows[1].children;

Selecting TD with specific classes from each TR and do math

I have a quite simple table.
Each TR with class "name-check" will be looped in php for as long as there are $name. Each new TR is getting a new class name with a counter, so basically the structures of the TR in this table looks like this:
Screenshot of table
<tr class="name-check name_1">
<tr class="name-check name_2">
<tr class="name-check name_3">
etc.
This is the content of each TR:
// Content of TR
<tr class="name-check name_1">
<td class="name">
<?php echo $name; ?>
</td>
<td class="check-date">
<label class="check-label"></label>
</td>
<td class="check-date">
<label class="check-label"></label>
</td>
<td class="check-date">
<label class="check-label"></label>
</td>
<td class="dont-count"></td>
<td class="check-date">
<label class="check-label"></label>
</td>
<td class="sum-up" align="center">
<span class="sum-up-span">0</span>
</td>
</tr>
This is the first TR which contains the TH:
// Table TH
<tr class="dates">
<th></th>
<th class="dat">1 </th>
<th class="dat">2 </th>
<th class="dat">3 </th>
<th class="dat">4 </th>
<th class="dont-count-th">Don't count</th>
</tr>
// Table TH End and after this tr comes:
<tr class="name-check name_1">...
<tr class="name-check name_2">
<tr class="name-check name_3">
When a user clicks on a TD with the class "check-date" that TD will get an extra class. Actually it is a click loop:
- 1 time click adds class .one,
- 2 time click adds class .two,
- 3 time click adds class .three.
What I want basically is, for each row, get the TD's which have any of these three classes and substract them from the number of TD's with the class of "check-date", or I could use the "TH" with class ".dat". The result should be displayed in the last td of each tr, the span with class ".sum-up-span".
I got that working for a single row, but multiple rows, it gets all the values.
var totalDays = $("tr.dates th.dat").length;
var daysOff = $("tr.name-check").each(function() {
$( "td.odsutan, td.godisnji, td.praznik" ).length;
var sum = totalDays - daysOff;
$(".sum-up-span").each(function () {
$(this).html("There " + sum + " from " + totalDays);
});
SOLVED
Both answers provided work great perfectly. Thank you guys for this.

Try this one,
$("td.check-date").click(function(e) {
if($(this).hasClass("one"))
$(this).removeClass("one").addClass("two");
else if($(this).hasClass("two"))
$(this).removeClass("two").addClass("three");
else if($(this).hasClass("three"))
$(this).removeClass("three");
else
$(this).addClass("one");
var tr = $(this).closest("tr");
var td_count = tr.find("td.check-date").length;
var clicked_td_count = tr.find("td.check-date.one, td.check-date.two, td.check-date.three").length;
tr.find("span.sum-up-span").text(td_count - clicked_td_count);
});

Your jQuery selectors are not limited to any container, so they search the entire page. What you need to do is limit them to the tr you clicked on.
Use the event e you get in a jQuery bound click function to do that:
function(e) {
var currentRow = jQuery(e.currentTarget);
var totalDays = $("tr.dates th.dat").length;
var daysOff = $("td.odsutan, td.godisnji, td.praznik", currentRow).length;
var sum = totalDays - daysOff;
$(".sum-up-span", currentRow).html("There " + sum + " from " + totalDays);
}
Note: if you don't have jQuery bound click events and need help with that, just ask.

$("table").on("click", "td.check-date", function() {
var row = $(this).closest("tr"),
checked = row.find(".one, .two, .three").length, // get the number of clicked/checked columns
toCheck = row.find(".check-date").length; // get number of columns to check
row.find(".sum-up-span").text(toCheck - checked); // print missing checks in "sum-up" column
});
// this only adds the "click" feature for a better visibility :D
(function() {
var classes = ["one", "two", "three", ""];
$("td.check-date").on("click", function() {
var td = $(this),
clicked = td.data("clicked") || 0;
td.data("clicked", clicked + 1);
this.className = "check-date " + classes[clicked % classes.length];
});
}())
td {
border: solid 1px black;
padding: 20px
}
.one { background-color: green }
.two { background-color: yellow }
.three { background-color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="name-check">
<td class="name"></td>
<td class="check-date"></td>
<td class="check-date"></td>
<td class="check-date"></td>
<td class="dont-count"></td>
<td class="check-date"></td>
<td class="sum-up" align="center">
<span class="sum-up-span">0</span>
</td>
</tr>
<tr class="name-check">
<td class="name"></td>
<td class="check-date"></td>
<td class="check-date"></td>
<td class="check-date"></td>
<td class="dont-count"></td>
<td class="check-date"></td>
<td class="sum-up" align="center">
<span class="sum-up-span">0</span>
</td>
</tr>
</tbody>
</table>

Catch element by class using index or eq in jquery

HTML code:
<table border='1' cellpadding='5'>
<tr>
<td class="order">two</td>
<td>demo</td>
<td>last</td>
</tr>
<tr>
<td>two</td>
<td class="order">three two</td>
<td>sample</td>
</tr>
<tr>
<td>two</td>
<td class="order">five two</td>
<td>sample</td>
</tr>
<tr>
<td>five</td>
<td>quick</td>
<td class="order">nine</td>
</tr>
</table>
jQuery code:
$('.order').click(function(){
var index = $(this).index();
var text = $(".order:eq(index-1)").text();
alert(text);
});
On clicking any order class I want to get previous or next element with same order class. What iswrong with my code.
Here is my Fiddle
Thank you.

index is a variable so you have to add it to the string in jQuery like:
$(".order").click(function() {
var index = $(".order").index(this);
var text = $(".order:eq("+(index-1)+")").text();
alert(text);
});
DEMO

You need to find the index based on the collection set
var $orders = $('.order').click(function () {
var index = $orders.index(this);
if (index > 0) {
var text = $orders.eq(index - 1).text();
alert(text);
}
});
Demo: Fiddle

There are two problems with that code:
First, that form of index will tell you the index of the element relative to its siblings, not relative to other elements with the same class. So with your HTML, it'll always be 1 because all of your .order elements are the second child in their parent.
The second thing is that this line:
var text = $(".order:eq(index-1)").text();
...uses index literally, it doesn't swap in the value of your index variable.
You're on the right track with index, though, you just use a different form of it:
var orders = $(".order");
var index = orders.index(this);
Then rather than build a selector that jQuery can't hand off to the browser (because it uses a jQuery-specific :eq selector), use the eq function:
var text = orders.eq(index - 1).text();
But you'll want to handle the case where there is no previous element as well, perhaps:
var text = index > 0 ? orders.eq(index - 1).text() : "default text";
Live example:
$('.order').click(function(){
var orders = $(".order");
var index = orders.index(this);
var text = index > 0 ? orders.eq(index - 1).text() : "default text";
alert(text);
return false;
});
<table border='1' cellpadding='5'>
<tr>
<td class="order">two</td>
<td>demo</td>
<td>last</td>
</tr>
<tr>
<td>two</td>
<td class="order">three two</td>
<td>sample</td>
</tr>
<tr>
<td>two</td>
<td class="order">five two</td>
<td>sample</td>
</tr>
<tr>
<td>five</td>
<td>quick</td>
<td class="order">nine</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

traverse through whole table and check span tag atrribute name

HTML:
<table id="mytable">
<tr>
<td class="cssred"><span name='478'>john</span></td>
</tr>
<tr>
<td class="cssred"><span name='478'></span></td>
</tr>
<tr>
<td class="cssred"><span name='478'></span></td>
</tr>
<tr>
<td class="cssred"><span name='521'></span></td>
</tr>
<tr>
<td class="cssred"><span name='522'></span></td>
</tr>
</table>
JavaScript:
$(this).find('span').attr('name');
i have to traverse through whole table and check any span tag atrribute name value be 478 then make its parent cell class cssgreen.

$("#mytable td:has(span[name='478'])").toggleClass("cssred cssgreen");
or
$("#mytable span[name='478']").parent().toggleClass("cssred cssgreen");
DEMO: http://jsfiddle.net/E55jb/

Try this
$('#mytable span').each(function() {
if($(this).attr('name') == "478") $(this).parent().removeClass('cssred').addClass('cssgreen');
});
or easier
$('#mytable span[name=478]').parent().removeClass('cssred').addClass('cssgreen');

try this
$('span[name="478"]').each(function(){
$(this).parent().removeClass("cssred");
$(this).parent().addClass("cssgreen");
})

Solution:
$("#mytable span").each(function() {
if($(this).attr("name") == "478"){ // check if name=478
$(this).parent().removeClass("cssred"); // remove red bg
$(this).parent().addClass("cssgreen"); // add green bg
});

which jquery selector to do this?

<div id="m101">
<table class="tablec" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="name">My Name</span></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="clickme">clickme</span></td>
</tr>
</table>
</div>
Which selector should I use to capture the content of "name" if clickme is clicked? There are more than one of those tables with the same classes, but the surrounding divs are unique. The name is different each time.
I've been experimenting the with parent, parents and closest functions so far without luck.
$(".clickme").click(function(){
var name = $(this).closest('.name').text();
alert(name);
});

Would something like this do the trick?
$(".name", $(this).closest("div")).text()
Working example here: http://jsfiddle.net/44re8/

You can traverse the tree up until you hit a <table>:
var name = $( this ).closest( 'table' ).find( '.name' ).text();

You are not able to select the .name using closest() as it is not an ancestor. You would need to select a common ancestor e.g. the table and then work back down the tree to the .name element.
$(".clickme").click(function(){
var table = $(this).closest("table");
var name = table.find('.name').text();
alert(name);
});
You could have this in a single line using
$(".clickme").click(function(){
var name = $(this).closest("table").find('.name').text();
alert(name);
});

This did the work for me
function() {
$(".clickme").click(
function(e) {
alert($(this).parents("div").find(".name").html());
}
);
}

Simplest of answers -
$(document).ready(function(){
$('.clickme').click(function(){
var getName = $('.name').text();
alert(getName);
});
});