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

Applying css to the table row dynamically created with Vue.js

So I have table, where rows are created dynamically using v-for:
<table>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr v-for='data in datas'><td class='name'>#{{data.name}}</td><td>#{{data.surname}}</td></tr>
</table>
And then, using jQuery, I want to hide the column with class 'name', but when I make
$('.name').hide();
Only header disappears. I suppose it's because the row is made dynamically, but how could I handle this?
I've tried:
making each() function on all elements with this class,
writing script like .css('display','none'), not hide()
but it didn't help. Strange, but alert() in each() fires each time it should, but hide() ignores added elements
More concrete data:
the table itself:
<table class="striped bordered responsive">
<thead>
<tr><th class="stat-table-creatives" colspan="2">Creative info</th><th>Impressions</th><th>Clicks</th><th>CTR</th><th>CPC</th><th>Price per unit</th><th>Sum</th><th class="stat-table-date">Date</th></tr>
</thead>
<tbody>
<tr v-for="stat in stats"><td class="stat-table-creatives">#{{ stat.creativeTitle }}</td><td class="stat-table-creatives">#{{ stat.creativeType }}</td><td>#{{ stat.impressions }}</td><td>#{{ stat.clicks }}</td><td>#{{ stat.ctr }}</td><td>#{{ stat.cpc }}</td><td>#{{ stat.client_price }}</td><td>#{{ stat.sum }}</td><td class="stat-table-date">#{{ stat.date }}</td></tr>
</tbody>
</table>
function called on button click
getJsonForStats: function(filters){
if((filters[0]=='creative')||(filters[1]=='creative')){
$('.stat-table-creatives').show();
} else {
$('.stat-table-creatives').hide();
}
if((filters[0]=='date')||(filters[1]=='date')){
$('.stat-table-date').show();
} else {
$('.stat-table-date').hide();
}
});
The function is called from another function, which is called on v-on:click

jQuery works just fine with Vue dynamically created table. Check this fiddle: https://jsfiddle.net/crabbly/9o69f2yr/
I believe the problem will be on how your application is loading, your filters, etc.
Depending on how you are trying to access the table rows, you may want to make sure that DOM is completely updated before querying it. You can use Vue's nextTick (http://vuejs.org/api/#Vue-nextTick).
Inside your Vue method, before you try to hide the rows, in your example, calling getJsonForStats method, you can do
this.$nextTick(function() {
//DOM updated and ready to rock and roll
this.getJsonForStats(..your filter params...);
}

suppose it's because you use the same class for <th> and <td>
try <th class="name-th"> and then $(".name-th").hide(); $(".name").hide();
maybe it will help
UPD:
I don't know.. this code is working perfectly:
<table id="tab" border='1'>
<tr><th class='name'>Name</th><th>Surname</th></tr>
<tr><td class='name'>n</td><td>s</td></tr>
</table>
<input id="click" type="button" value="Hide" />
js:
$(document).ready(function(){
$("#click").click(function(){
$("#tab").find(".name").hide();
});
});

jQuery- Hide table -> After reloading page,my table shows up for couple seconds

I have problem with my table.I use jQuery function .hide().
$("#table").hide();
And that works perfectly, but there is one problem.After reloading page, my table shows up for couple seconds and then hide.
I have been trying many things, i put .hide() function first in list but still nothing.
I used $("#table").css("display", "none"), but still i have same problem.
What should i do?

You could do something like,
Add style to table For Example,
<table id="table" style="display: none">
<thead>
<tr>
<td>Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>Thiru</td>
</tr>
</tbody>
<table>

You do not need to use jQuery to hide content on load, just use display: none.
#table {
display: none;
}
To answer to your question, I you are using hide() into a $(document).ready(function() {}). So it is executed after your page is fully loaded.

Facing issues while hiding div

i am creating a table and hide it immediately after its creation. [don't want to face DOM]. then user select from dropdown and i show it. its working fine. but when i go to that page for the first time it does not hide that div.
code
<table class="table table-striped table-bordered " id="book_info" >
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
<script> $('#book_info').hide();
alert("passed");
</script>
<!-- remaining html stuff-->
that alert do not hit when i goto that page. when i refresh the page ,it shows alert...

You need to wrap your jQuery method calls in a document ready():
$(document).ready(function() {
$('#book_info').hide();
...
});
Alternatively you could just use CSS to initially render the table hidden:
#book_info {
display: none;
}
...then call jQuery's show() method when you want to display it:
$('#book_info').show();

Jquery click handler not working in a table [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I am using a Jquery plugin called Jquery Content Panel Switcher. It does exactly what the title says, it switches out divs with ease. The html for the page is:
<!--The switcher buttons, basic anchor tags, with the switcher class -->
<a id="content1" class="switcher">One</a>
<a id="content2" class="switcher">Two</a>
<!-- The panel you wish to use to display the content -->
<div id="switcher-panel"></div>
<!-- The actual content you want to switch in and out of the panel, this is hidden -->
<div id="content1-content" class="switcher-content show"></div>
<div id="content2-content" class="switcher-content show"></div>
In each of my content panels I have a form. In each form there is a table:
<table class="table table-hover" data-controller="rank">
<thead>
<tr>
<th colspan="4" align="left"><h2>Rank 1</h2></th>
</tr>
<tr>
<th>Number</th>
<th>Requirements</th>
</tr>
</thead>
<tbody>
<tr data-name="one_li">
<td>1</td>
<td>Info</td>
</tr>
<tr data-name="two_li">
<td>2</td>
<td>More Info</td>
</td>
</tr>
</tbody>
</table>
I am trying to fire off an action if a row gets clicked. Here is the javascript I am using:
$(document).ready(function(){
$('#switcher-panel form table tbody tr').click(function(){
console.log("Clicked");
});
});
When I use the Jquery selector of $('#switcher-panel form table tbody tr') in my Chrome console, it finds the table and everything looks fine. When I put it in my javascript file, nothing happens. Some direction would be great. Thanks for the help.

This will work:
$('#switcher-panel').on('click', 'table tr', function() {
console.log("Clicked", this);
});
Example
This adds a listener to the #switcher-panel that listens for click events on it's children, if the clicked child falls under the 'table tr' selector.
Check out this artice for more info about event delegation. (Ctrl+f for Event delegation)

If the content of the panel is dynamically appended you would need to delegate the click event to a static parent element. Try this:
$('#switcher-panel').on('click', 'form table tbody tr', function(){
console.log("Clicked");
});
My guess would be you could shorten the child selector to table tr as well.