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);
})

Hide a tr only if td contains no content AFTER a specific html tag

Is it possible to examine the content within a tr, AFTER an html element (br) to see if any exists? If there is no content after the br element, I'd like to hide the parent td. Please note that the html code is system generated and I cannot edit it.
I'm just not sure where to begin with this. Any help is greatly appreciated.
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Try using .each() , nextSibling , nodeValue , String.prototype.match() , .closest()
$("table tr td br").each(function(i, el) {
// if `br` next sibling does not contain alphanumeric characters,
// hide parent `tr` element
if (el.nextSibling.nodeType === 3
&& el.nextSibling.nodeValue.match(/\w+/) === null
|| $(el).next(":empty").length) {
$(this).closest("tr").hide()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr><!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br><span></span>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Yes, you just get the trs, then find out if the first <br> element inside the first <td> has any following element siblings (I'm making an assumption there, that you don't want those hidden), or any following text node siblings that aren't blank. jQuery's contents is handy for that, as it includes text nodes. I'd probably loop through them backward:
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
I expect that can be optimized, but you get the idea.
Live Example:
var counter = 3;
tick();
function tick() {
$("#countdown").text(counter--);
if (counter < 0) {
hideIt();
} else {
setTimeout(tick, 500);
}
}
function hideIt() {
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
}
<table class="tabledefault">
<tbody>
<tr>
<td id="customfields">
<table class="tabledefault">
<tbody>
<tr>
<!-- this TR should be hidden -->
<td id="CAT_Custom_451068"><strong>Laser Tag</strong>
<br>
</td>
</tr>
<tr>
<td id="CAT_Custom_451069"><strong>Arcade</strong>
<br>Selected
</td>
</tr>
<tr>
<td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong>
<br>False
</td>
</tr>
<tr>
<td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong>
<br>True</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown"> </div>

Delete duplicate cells of a one column :html

I am to do the same as per This
<table id="test" border="1">
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test4</td>
<td>test2</td>
<td>test5</td>
</tr>
<tr>
<td>test6</td>
<td>test2</td>
<td>test9</td>
</tr>
<tr>
<td>test6</td>
<td>test8</td>
<td>test8</td>
</tr>
</table>
LINK of Fiddle
I am able to delete the duplicates from table all columns,but I want to delete duplicate cell values from only first column.
Orginal Output
Remove duplicates from total table getting output as
I want this

Script
var seen = {};
$('#test td:first-child').each(function() {
// Encode column and content information.
var key = $(this).text();
if (seen[key]) {
$(this).text('');
}
else {
seen[key] = true;
}
});
Fiddle Demo
Explanation:
$('#test td:first-child') This helps to select only the first Row of the Table

Use this code it is working fine.
var seen = {};
$('#test td').each(function() {
// Encode column and content information.
var key = $(this).index() + $(this).text();
if (seen[key] && $(this).index()==0) {
$(this).text('');
}
else {
seen[key] = true;
}
});
Fiddle Demo

index of tr with tds only --- relative to click

How do I get the index of the <tr> in the table but only if it has <td>s and not <th>s
If I use a click event below it will alert the index of the with td and th but I only want <tr> with <td>s
thanks
$('td').click(function(){
var s = $(this).parents('table tr:has(td)').index();////// returns
alert(s);
});
<table>
<tr>
<th><th><th><th><th><th><th><th><th><th>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
<tr>
<td><td><td><td><td><td><td><td><td><td>
</tr>
</table>

Try this...
$('td').click(function(){
if ( ! $(this).closest('table').find('th').length ) {
var s = $(this).closest('tr').index();
alert(parseInt(s) + 1);
}
});​
JS FIDDLE LINK

Your given code is working properly. see this jsfiddle.

How to get value from TD column using this.value

<table>
<tr onClick = "alert(this.FirstTDValue);" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
</table>
How would this.FirstTDValue be accomplished so that alert would show '123', would it be efficient to request it at the TR or the Table level?

Table rows have a cells collection that is a live NodeList of the cells, so:
alert(this.cells[0].textContent || this.cells[0].innerText);
Or perhaps:
alert(this.cells[0].firstChild.data);

<tr> elements have a cells collection that lets you access the child <td> elements:
this.cells[0].innerHTML

Something like...
<tr onClick = "getTD();" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
<script type="text/javascript">
function getTD(){
alert(document.body.getElementsByTagName("td")[0]);
}
</script>

This is how I did it:
<script>
Element.prototype.FirstTDValue = function() {
for (var i = 0; i< this.childNodes.length; i++) {
if (this.childNodes[i].tagName == 'TD') {
return this.childNodes[i].innerHTML;
}
}
return ("No TD Values");
}
</script>
<table>
<tr onClick = "alert(this.FirstTDValue())" >
<td>123</td>
<td>Hello</td>
<td>Goodbye</td>
</tr>
</table>

jQuery Solution:
<tr onClick="alert( $(this).children().first().text() )" >