We Keep Coding

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>

Finding td element position in table row

How would I go about finding a td element's position in a table row? I have seen this code suggested, but is there a way to do this with having each td tag contain an onclick event?
<table>
<tr>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
<td onclick="myFunction(this)">Click to show cellIndex</td>
</tr>
</table>
<script>
function myFunction(x) {
alert("Cell index is: " + x.cellIndex);
}
</script>
I have a grid of images and I am trying to see which images in the grid have been clicked. I tried this:
$('td img').on('click', function(x){
console.log("Cell index is: " + x.cellIndex);
});
But it just logs undefined

$('td img').on('click', function(e) {
var td = $(this).parent();
var tr = td.parent();
var children = tr.children().length;
var tdIndex = td.index() + 1;
var trIndex = tr.index();
console.log((trIndex * children) + tdIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><img src="1.jpg" /></td>
<td><img src="2.jpg" /></td>
</tr>
<tr>
<td><img src="1.jpg" /></td>
<td><img src="2.jpg" /></td>
</tr>
</table>

$('table tr td').click(function() {
console.log($(this).index()) //use index() to get the index of clicked td
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
<td>Click to show cellIndex|</td>
</tr>
</table>
attach a click to td and use .index() to get the index of click td

You can use $.index() function in jquery to get the object's index
https://api.jquery.com/index/
function myFunction(x) {
alert($(x).index());
}
Hope it helps.

You just need to call .index() on the element that you are trying to get the index of.
$('td img').click(function(){
var index = $(this).parent().index();
});
Here is a fiddle:
https://jsfiddle.net/407u4Lp2/1/

In vanilla JavaScript, you could handle it like so:
var tds = document.querySelectorAll('td');
for(var i = 0, len = tds.length; i < len; i++) {
tds[i].addEventListener('click', function(e){
var td = this || (e || event).target;
alert(td.cellIndex)
});
}
Attaching the onclick event to each TD element on the page. Here's a Fiddle of it in action, and with jQuery you just need to specify what the x is referencing.
$('td').on('click', function(e){
alert('this.cellIndex: ' + this.cellIndex + '\n$(this),index(): ' + $(this).index());
});
Documentation on event.target

How to get parent id with jQuery?

$('td').click(function() {
myId = $(this).parent().attr("id");
myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td></div>
</tr>
</table>
When I click on table item I want to get alert 'u clicked science' but I get undefined.
Any help would be appreciated!

There are no id attributes in your markup. All you are dealing with is innerText
$('td').click(function() {
var myItem = $(this).text();
alert('u clicked ' + myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td>
</tr>
</table>

You have invalid markup. extra closing div is added after last tr closing markup. you need to remove it.
what you need to alert is text of element and not parent id. use .text() along with clicked td elements jquery context:
$('td').click(function(){
myItem=$(this).text();
alert('u clicked ' +myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td>Computer</td></tr>
<tr><td>maths</td></tr>
<tr><td>physics</td></tr>
</table>

try this:
$('td').click(function () {
alert('u clicked ' + $(this).text());
});

As I have already commented, you are missing ID in tr. I have added few more tds for demo.
$('td').click(function() {
var myId = $(this).parent().attr("id");
var myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr id="IT">
<td>Computer</td>
</tr>
<tr id="General">
<td>maths</td>
<td>History</td>
</tr>
<tr id="Science">
<td>physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
</table>

Getting Value From Table TR id and TD id

I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?

Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});

you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.

The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.

Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.

getting the row values with checkbox

hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});

This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/

if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});

jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});