We Keep Coding

Access td with class on row open

I have a footable
. When I click on the plus to expand a row
I want to access with jQuery the yellow elements:
If I inspect the element the DOM looks like that after the click:
<table class="footable-details table">
<tbody>
<tr><th>
DOB (hide)
</th><td style="display: table-cell;">
10/16/1977
</td></tr><tr><th>
Description
</th><td class="someText" style="display: table-cell;">
Some description
</td></tr>
</tbody>
</table>
What I would like to do, is to set colspan="2" for td.someText and hide the <th>Description</th>. But I can't access td.someText
I tried to access it with
$('.footable').on('expand.ft.row', function(e, ft, row){
$(row.$details).find('td.someText'));
});
but he does not find anything. In fact, alert($(row.$details).html()); only returns
<td colspan="4">
<table class="footable-details table">
<tbody>
</tbody>
</table>
</td>
Any idea how to access the td with class someText after click?
Here is a jsFiddle
Note: This is not a duplicate of Footable and capturing the expand row event. The linked question is about how to access a row in general. This question is if I select it with the method from the API the content is not loaded correctly. The question helped me to get here, but does not to solve the here presented issue.

expand.ft.row event fires before it appends the dom content.so if you try to read the row content, it's not there.
The correct event for your case is expanded.ft.row which fires after appending the content.
$('.footable').on('expanded.ft.row', function(e, ft, row) {
alert($(row.$details).html());
});
check this demo
https://jsfiddle.net/bfmaredn/
I found this event by analyzing the source code from GitHub repository https://github.com/fooplugins/FooTable/blob/V3/src/js/classes/FooTable.Row.js

Use "async function", try the following code:
$(function() {
$(".footable").footable();
$('.footable').on('expand.ft.row', async function(e, ft, row) {
alert($(await row.$details).html());
});
});
Refer:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Jquery select first parent of <td> tag in HTML table

I'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?

Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO

Use .siblings() in jquery
$(this).siblings('th.aco').text();

$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().

jQuery finding child elements of <table>?

I am trying to execute a function for each "tr" child element of my "table" with jquery, but this code does not identify the children. I've used this code for "div" based designs before and it works perfectly if I change the "table" and "tr" tags to "div" but it doesn't run here!
This is simple design:
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<table>
<tr align="center">
<input id="btnSearch" type="button" value="Search" />
</tr>
</table>
And this is jquery:
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").children("tr").each(function(){
alert($(this).text);
});
});
});
jsfiddle:
Note that the alert is run just once! And I have also removed the "tr" for children in my jsfiddle to make the code runnable...
could anyone help me?

The tr elements are not children of table, the are children of tbody (or thead or tfoot). The tbody element is automatically created if you don't specify it. You can figure this out easily for yourself if you inspect the generated DOM.
Long story short, either search for all descendants, with .find
$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")
or include tbdoy in your selector:
$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")
That being said, you also have to add the actual content inside td elements, as noted in the other answers.
If you are new to HTML and tables, read the MDN documentation.

There are 2 problems, an invalid html and the selector is wrong
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
then
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch").find(">tbody > tr").each(function () {
alert($(this).text());
});
});
});
Demo: Fiddle

Problems were:
tables automatically have tbody elements inserted into the DOM, so you should not reference TR's as children of a TABLE element.
You referenced a non-existant text property instead of the jQuery text() function.
You probably want to reference the tds anyway (and probably only a specific TD in each row), as returning the text of an entire row (TR) seldom makes sense in HTML.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/TdGKj/1/
$(function () {
$('#btnSearch').click(function () {
var a = $("#tblSearch td:first-child").each(function () {
alert($(this).text());
});
});
});
The #tblSearch td:first-child selector basically says: "Find the element with id=tblSearch then search for any td elements that are the first child of their parent. Note I added a second column of dummy TDs cells to the JSFiddle so you could see this in practice.
There any many selectors for choosing specific children, which will vary based on your specific needs, but that just needs a little research of jQuery selectors

You don't need to use children at all. You can just create a selector -
$('#tblSearch tr td')
WORKING DEMO - http://codepen.io/nitishdhar/pen/Aiwgm
First you need to fix your HTML structure, place the child td elements inside each tr -
<table id="tblSearch" border="1px">
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hey</td>
</tr>
<tr>
<td>Hi</td>
</tr>
<tr>
<td>There!</td>
</tr>
</table>
<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>
Now you can alert each value using this javascript snippet -
$(function () {
$('#btnSearch').click(function () {
$("#tblSearch tr td").each(function(){
alert($(this).text());
});
});
});
Note - This will alert each value separately as you needed.

First of all fix up your html and add the correct tags around the cell data
Then this should do what you're wanting:
$('table#tblSearch tr').children().each(function(){
alert($(this).text());
});

You have multiple problems in the question you provided:
Your HTML is not valid; Place a td element inside each tr
Call the correct jQuery function. Instead of using children('tr'), which it won't find because there are no tr that are children to the table element (only tbody,thead, etc), you will need to call the find() jQuery function (e.g. find('td')) and from there you will be able to get the text of the cell; however, you may also be able to find tr and get text of the whole row in that case.

how to select the first td

My Html is bellow.
<tr class="success">
cfgdfgh
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
My Jquery code is bellow
$(".deleteMenu").click(function(){
$(this).parent().css("color","red");
});
I tried that using above jquery code but no luck.I want to selete first td ?
DEMO

Try:
$(".deleteMenu").click(function () {
$(this).closest('tr').find('td:first').css("color", "red");
});
jsFiddle example
With your selector, .parent(), you're selecting the cell that contains the button. One way to accomplish what you want it to traverse up the DOM to the row (.closest('tr')) and then back down to the first cell (.find('td:first')).
BTW on a side note, in your example, the text cfgdfgh isn't valid where you have it.

1) Start by writing valid HTML
2) Go up the DOM tree until u get to the row element, for that you should use .closest()
3) Find the first child of that row element
4) Apply whatever style changes you want
Fiddle: http://jsfiddle.net/u4A7V/7/
Code:
$(".deleteMenu").click(function () {
$(this).closest("tr") // go up the tree
.find("td:first-child") // find the first child
.css("color", "red"); // change color
});

It's pretty easily done this way:
$(".parentClass").find("td:eq(0)")... /* :eq(0) = first occurance */
Also your HTML Markup is erroneous.

The easiest approach would be to assign a class to the . I don't know if it's possible to assign an id to a (probably possible).

This will get the first td in the row:
$(".deleteMenu").click(function(){
$('.success td').eq(0).css("color","red");
});

Hopefull this helps:
http://jsbin.com/eruric/1/edit
$(".success").find("td:first").css("background-color", "red");

Your HTML is not valid, you lack a '' tag and you have text outside the <td>s, change it to this:
<table>
<tr class="success">
<td>1</td>
<td>home1</td>
<td>home1</td>
<td>home1</td>
<td>
<input class="btn btn-mini btn-danger deleteMenu" type="button" value="Delete" name="delete">fgfg</td>
</tr>
</table>
and then your js to:
$(".deleteMenu").click(function(){
$(this).parent().siblings(':eq(0)').css("color","red");
});
JSFiddle Demo

Here we are:
$(".deleteMenu").click(function(){
$(this).closest('tr').find('td').first().css("color","red");
});

$(".deleteMenu").parent() will choose the parent of that input, which is the TR. Also, don't include code straight in the TR, use TD or TH and put it inside. So after putting it in its own TD, you're looking for
$(".deleteMenu").click(function(){
$(this).parents("tr").find("td").first().css("color","red");
});

You can use :first-child.
I assume myTable is an Id of table
$("#myTable tr td:first-child").css("color","red");
Js Fiddle
Please change your markup as well.
tr elements can only have td no text. You have write text in tr element.

Change table row display property

I have an html page with a table that contains a hidden row:
<table>
<tr id="hiddenTr" style="display:none">
...
</tr>
</table>
I need to make it visible at client side using jquery. I tried this
$('#hiddenTr').show();
and this
$('#hiddenTr').css('display', 'table-row');
Both implementations don't work for me. Furthemore the second one is not crossbrowser.
UPD. Sorry, guys. That was my fault: I mistyped tr element id. That's strange $('hiddenTr') didn't return null...

I always set the style.display property to "" (empty string) to show a hidden table row:
var row = document.getElementById('row_id');
row.style.display = ""; // shows the row
To hide it again:
row.style.display = "none"; // hides the row
in jQuery , this would be:
$("#row_id").css("display", ""); // show the row
or
$("#row_id").css("display", "none"); // hides the row
IE doesn't seem to like the 'table-row' value for display. And 'block' is not correct, and it seems to screw up the display in other browsers sometimes.

The first one should work. Are you wrapping it in $(document).ready(function(){}); ?
$(document).ready(function(){
$('#hiddenTr').show();
});

You could try setting display:auto, but honestly, I've had nothing but trouble manually setting the display property for table rows/cells.
What I've found usually works is creating a CSS class called "hidden" that has display:none. Rather than show()ing, I just remove that class.

tried ?
$('#hiddenTr').css('display','block');
Also, you should put in a <TD></TD> with something in it, at least a so the row is not collapsed by your browser client. Diffrent clients behave diffrently...

You can try this code.
CSS style
<style>
.hiddenTr {display: none;}
</style>
HTML Table Content
<table>
<tr class="hiddenTr">
<td>Hidden Table Row</td>
</tr>
<tr><td>Table Row</td></tr>
<tr><td>Table Row</td></tr>
</table>
HTML button code
<button onclick="myFunction()">Click Me</button>
Include jQuery CDN
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Create a custom javascript function
<script>
function myFunction() {
$('.hiddenTr').toggle();
};
</script>