We Keep Coding

misbehave javascript when the associate class has multiple instance

The Js snippet below work for single html table (class = mtable), basically it will freeze the first column when i scroll left on the table. it misbehave when i have multiple "mtable" class html table where scroll at one table will cause all the table scroll at the same time. How should i fix this so that each table will work independently?
$(document).on('mouseover', '.mtable tbody', function(){
// alert('scrolling');
$('.mtable tbody').on('scroll', function() {
$('.mtable thead').css("left", -$(".mtable tbody").scrollLeft());
$('.mtable thead tr th:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
$('.mtable tbody tr td:first-child').css("left", $(".mtable tbody").scrollLeft()-2);
});
});

You need to store a reference to the current .mtable element and then call the DOM traversal functions based on that table only, something like this:
$(document).on('mouseover', '.mtable tbody', function() {
var $tbody = $(this);
var $table = $tbody.closest('.mtable');
var $thead = $table.find('thead');
var $tbody = $table.find('tbody').off('scroll').on('scroll', function() {
$thead.css("left", -$tbody.scrollLeft());
$thead.find('tr th:first-child').css("left", $tbody.scrollLeft() - 2);
$tbody.find('tr td:first-child').css("left", $tbody.scrollLeft() - 2);
});
});

Exclude particular row from each loop based on Class Name

How to exclude a particular row based on its class-name using Jquery.
filterBySensor= function (event) {
j("#example tr").hide(); //hide all rows
j("#example tr:first").show();
var snsrname = j("#ulsensor option:selected").text(); //retrieve wanted status
if(snsrname == "All")
j("#example tr").show(); //show all rows if want to see All
else {
j("#example tr").each(function() { //loop over each row
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
}
}
The above code works perfectly and checks every row in the table.
But I want to exclude some rows based on its classname.
For example: There are 3 rows with classname GROUP and I need to exclude them from loop. Any help will be appreciated. Thanx in advance

Try using .not() method of jQuery :-
j("#example tr").not(".group").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
OR(You can use not the way shown below)
j("#example tr:not(.group)").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});

How to dynamically click a label to check entire row only?

The number of rows are dynamic so I cant fixate on the name of the row, here is the fiddle: http://jsfiddle.net/1vp29wxq/1/
$('.NameOfSensor').on("click", function () {
var tr = $(this).parents('tr:first');
var thisRow = tr.find(".rowMode");
var checkChecked = $("input[class='rowMode']:checkbox:checked");
var checkBoxes = $("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
What I get from that is that all check boxes are selected, but I just want the ones from the row where it is clicked. Also, whatever I tried I cant seem to incorporate the 2 variables (tr and thisRow) I created, can I get some help? Also, the number of columns in which the checkboxes are, are always 6 (sometimes I just hide them).

Change your code into this:
$('.NameOfSensor').on("click", function () {
var tr = $(this).closest('tr');
var checkChecked = $(tr).find("input[class='rowMode']:checkbox:checked");
var checkBoxes = $(tr).find("input[class='rowMode']:checkbox");
if (checkChecked.length < checkBoxes.length)
{
checkBoxes.prop("checked", true);
}
else {
checkBoxes.prop("checked", false);
}
});
Your selector was wrong and got all rows.

Search for checkboxes within the clicked line:
var tr = $(this).closest('tr'); // fast alternative to `.parents('xxx:first')`
var checkChecked = $("input[class='rowMode']:checkbox:checked", tr),
checkBoxes = $("input[class='rowMode']:checkbox", tr);
DEMO: http://jsfiddle.net/1vp29wxq/2/

Get id from html table when clicking an input inside the table

How can you get the id of a table when you click an input element?
I don't need the rowId etc.
I've tried parentNode.id but I can't seem to get the id.
In the end I'd like to do something like this:
var tabelid = INPUT....parentNode.parentNode.id;
var table = document.getElementById(tabelid);
Example:

How about this:-
Demo
Html
<table id="tblTest">
<tr>
<td>
<input type="text" id="txtTest" onclick="getParent.call(this)" />
</td>
</tr>
</table>
I am using call here so that i get the elements context inside the getParent event callback.
Javascript
function getParent()
{
var parent = this.parentNode;
var tagName = "table";
while (parent) { //Loop through until you find the desired parent tag name
if (parent.tagName && parent .tagName.toLowerCase() == tagName) {
alert(parent .id);
return;
}
else
{
parent = parent .parentNode;
}
}
}
If you are using Jquery:-
in the click event you can just do $(this).closest('table').attr('id')

If you are using jQuery you can use closest to find the closest matching ancestor like so:
var tableID = "";
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').attr('id');
});
]);
Edit:
If you actually want to do something with that table (for instance add a class), you could do the following:
$(document).ready(function(){
$('input[type="text"]').click(function(e){
tableID = $(this).closest('table').addClass('myClass');
});
]);
This simply removes the need to fetch the table ID, store it, and then fetch the table based on it's ID. Since you already found the table in order to get its ID you can just manipulate it right away.

You have to ascend the DOM from TD to TABLE keeping in mind that browsers may inject a TBODY if you haven't specified it. So, your code should look something like this:
var tableCells = document.getElementsByTagName('td'),
cellCount = tableCells.length,
i;
for (i = 0; i < cellCount; i += 1) {
tableCells[i].onclick = function () {
var tableId = getTableId(this);
console.log(tableId);
};
}
function getTableId(node) {
var element = node;
while (element.tagName.toLowerCase() !== 'table') {
element = element.parentNode;
}
return element.id;
}
Check out the demo.

Getting third cell of each row

var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this+":nth-child(3)").text();
alert(thirdCell);
});
Something in the var thirdCell line is not working correctly. Each row has four children, all td tags. I want to get the text inside the third cell.

Try something like below,
var Rows = $("#tableid tbody tr");
Rows.each(function(index, element) {
var thirdCell = $(this).find('td').eq(2).text();
alert(thirdCell);
});

this is not a string, it's a jquery object, so it can't be appended to when you are building your new selector. You could do it like this:
var selector = $(this).selector;
var thirdCell = $(selector+":nth-child(3)").text();
alert(thirdCell);
http://jsfiddle.net/2URV7/

This will not work because tr has no text. it has TDs. you can apply though html() to get the innerHTML of the tr, or use text() on tds if they actually contain text.

you can get all cells from each row by 0 based index
Rows.each(function(index, element) {
var thirdCell = $(this.cells[2]).text();
alert(thirdCell);
});
or you can get it in original selector
var Third = $("#tableid tbody tr > td:nth-child(3)");
Third.each(function(index, element) {
var thirdCell = $(this).text();
alert(thirdCell);
});