Develop Reference

jQuery how to select td with rowspan attribute?

The code below can get the html table tds with attribute 'rowspan',
$elem.find('td').filter('[rowspan]')
but how can I get the tds who's 'rowspan' is more than 1,like:
$elem.find('td').filter('[rowspan > 1]')

You can apply a function to your filter and return elements whose rowSpan is greater than 1:
$.elem.find('td').filter(function() {
return this.rowSpan > 1;
});
Note that there's no need to wrap attr() or re-wrap this (as $(this)) as rowSpan is a native element property (which is conveniently already a numeric type, so no number conversion is needed).
Example
$('td').filter(function() {
return this.rowSpan > 1;
}).css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>No rowspan</td>
<td rowspan=1>Rowspan 1</td>
<td rowspan=2>Rowspan 2</td>
</tr>
</tbody>
</table>

Try something like this :-
$elem.find('td').filter(function(){
return (parseInt($(this).attr('rowspan'),10) > 1);
});

use : parseInt($(this).attr('rowspan'),10) > 1

You can iterate in each td element and check if attribute rowspan is > 1. In my example I use css class to represent if a td has rowspan > 1 adding to this element class pass or fail accordingly.
$("table tbody tr td[rowspan]").each(function() {
$(this).addClass(parseInt($(this).attr("rowspan"), 10) > 1 ? "pass" : "fail");
});
.pass {
background: green;
}
.fail {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td rowspan='2'>2</td>
<td rowspan='3'>3</td>
<td>no rowspan</td>
<td rowspan='1'>1</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td rowspan='3'>3</td>
<td>no rowspan</td>
<td rowspan='1'>1</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td rowspan='3'>3</td>
<td>no rowspan</td>
<td rowspan='1'>1</td>
</tr>
</tbody>
</table>

To get the tds who's 'rowspan' is more than 1, you may try the following:
var allTdsWithMoreThanOneRowspan = $elem.find('td[rowspan]').filter(function () {
return ($(this).attr('rowspan') > 1);
})

Find parent sibling td hidden value

I want to find parent sibling td hidden value when clicking correctAttempt class in div.
<tr th:each="m : ${markWiseResultModel}">
<td th:text="${m.id}" align="center"></td>
<td class="topicTD">
<input type="hidden" class="topicId" th:value="${m.topic.id}"/>
<div th:text="${m.topic.name}" align="center"></div>
</td>
<td data-toggle="modal" style="background:#b8d1f3;">
<div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div>
</td>
<td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>
<td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
<td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>
</tr>
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).parents('td').siblings('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
Already tried script with no success.

Try this-
Demo
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});

Try this one.
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id= $(this).parent().prev('.topicTD').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>

You can use closest to get the parent tr element, then you need to find the .topicId. Try this:
<script>
$(document).ready(function(){
$('.correctAttempt').click(function(){
var id = $(this).closest('tr').find(".topicId").val();
alert(id);
$('#correctOutOfAttempt').modal('show');
});
});
</script>
The advantage of using closest instead of traversing rigidly by parent is that you can change your tr and td structure without having to amend the JS code, so long as the classnames remain the same.
Example fiddle

How to hide tr items when td is 0 in jquery?

I want to hide all of the <tr> where td's text is 0. How can I do that? I have to mention that in reality i have more than 600 rows. But the example below is a demo. THX
<table id ="list2">
<tbody>
<tr>
<td>2</td>
<td>213</td>
<td id ="hideRow">0</td>
<tr>
<tr>
<td>vb</td>
<td>asf</td>
<td id ="hideRow">0</td>
<tr>
<tr>
<td>cxvb</td>
<td>xcvb</td>
<td id ="hideRow">2</td>
<tr>
<tr>
<td>cas</td>
<td>asdf</td>
<td id ="hideRow">45</td>
<tr>
</tbody>
</table>
This is my try :| . The event is loaded by onclick event
$('#list2').find("tr td #hideRow").each(function(){
var txt2 = $(this).text();
if (txt2 =="0"){
$('#list2').find("tr").each(function(){
$(this).hide();
});
}
})

First of all do not use id for duplicate names. Try doing it like following.
<table id ="list2">
<tbody>
<tr>
<td>2</td>
<td>213</td>
<td class="hideRow">0</td>
<tr>
<tr>
<td>vb</td>
<td>asf</td>
<td class="hideRow">0</td>
<tr>
<tr>
<td>cxvb</td>
<td>xcvb</td>
<td class="hideRow">2</td>
<tr>
<tr>
<td>cas</td>
<td>asdf</td>
<td class="hideRow">45</td>
<tr>
</tbody>
</table>
$('#list2').find(".hideRow").each(function(){
var txt2 = $(this).text();
if (txt2 =="0"){
$(this).parent().hide();
}
})

IDs on elements need to be unique, you can't have multiple <td id="hideRow"> elements and expect things to play nicely all of the time. I'd suggest changing it to a class. Then, select all elements:
var elems = $('span.hideRow');
Filter to those whose text is 0:
elems = elems.filter(function() {
return $(this).text() === "0";
});
Get their parent <tr> element:
elems = elems.closest('tr');
Then, finally, hide them:
elems.hide();
That can, obviously, all be done in one line:
$('span.hideRow').filter(function() {return $(this).text() === "0";}).closest('tr').hide();

JavaScript function with parameter won't work

I'm making a function that would change the color of a row in a table when you click on it, there are many rows in this table.
I'm developing on Chrome (latest version) and it says that the function "selectme" is not defined.
My IDE is not signaling any errors (Dreamweaver CC)
<table>
<tr onClick="selectme('1')">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme('2')">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme('3')">
<td class="name">Grace - David Parsons</td>
</tr>
<tr onClick="selectme('4')">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
The javascript
function selectme(number)
{
var selector = "#" + number
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}

You could try passing the element itself as argument, try
<table>
<tr onClick="selectme(this)">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Grace - David Parsons</td>
</tr>
<tr onClick="selectme(this)">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
Javascript
function selectme(elem){
$(elem).css("background-color", "rgb(3,135,255)");
}
jsfiddle here
OR You could bind the table tr click event, Say the tables id is myTab
$('#myTab tr').on('click',function(e){
$(this).css("background-color", "rgb(3,135,255)");
});
jsfiddle here

<table>
<tr id="1" onClick="selectme(this.id)">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr id="2" onClick="selectme(this.id)">
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr id="3" onClick="selectme(this.id)">
<td class="name">Grace - David Parsons</td>
</tr>
<tr id="4" onClick="selectme(this.id)">
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
function selectme(number)
{
$("#"+number).css("background-color", "rgb(3,135,255)");
selected = number;
}
try this

I would suggest you:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<table id="table12">
<tr>
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
<tr>
<td class="name">Wheeving violins - John Lisbon</td>
</tr>
<tr>
<td class="name">Grace - David Parsons</td>
</tr>
<tr>
<td class="name">Linkin Park - In The End (cover)</td>
</tr>
</table>
<script>
$(function(){
$('#table12 tr').click(function(){
console.log(this);
$(this).css("background-color", "rgb(3,135,255)");
});
});
</script>
</body>
</html>

Inline event handlers are ugly and hard to maintain.
Why not try it unobtrusively?
$("table tr").on("click", function(){
$(this).toggleClass("blue");
});
Fiddle
If you need to change the rows different colors, you could use data attributes, e.g.
<tr data-color="red">
<td class="name">Relaxing Beauty - Ryan Astruld</td>
</tr>
$("table tr").on("click", function(){
var color = $(this).data("color");
$(this).toggleClass(color);
});

No semi-colon here:
var selector = "#" + number; <-- HERE

Replace this
function selectme(number)
{
var selector = "#" + number
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}
WITH
function selectme(number)
{
var selector = "#" + number; //HERE YOU FORGOT SEMI-COLON
$(selector).css("background-color", "rgb(3,135,255)");
selected = number;
}
Also your HTML onclick will call the javascript function but in the function you have
$(selector) which should point to id="1" but no control on your page exists with the id 1.
So also add the id="1" on your td's
<td id="1" onclick="selectme('1');"></td>
and because you have the id on the TD now, you can reference it directly in the onclick part
<td id="1" onclick="selectme(this.id);"></td>

Check whether any element in a list has an event

Is it possible to loop through a list of table cells and check if any has a particular event (for example click), and then execute the callback function?

You can use a td selector and the each method to loop and use the events data to get at the events you are looking for:
$("td").each(function ()
{
//Do you work here
});
So, for the following HTML:
<table id="t1">
<tr> <td id="t1A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
<table id="t2">
<tr> <td id="t2A">A <td> </tr>
<tr> <td>B <td> </tr>
<tr> <td>C <td> </tr>
<tr> <td>D <td></tr>
</table>
You can use the following:
$("#t1A").click(function () {
alert("t1A click event");
});
$("td").each(function () {
var events = $._data(this, "events")
if (!events) return;
var clickEvents = events.click;
if (!clickEvents) return;
if (clickEvents.length > 0) {
alert($(this).attr("id") + " has a click event");
$(this).click(); // Execute the click if you so desire.
}
});
See this example fiddle: http://jsfiddle.net/sdnr6/1/