Develop Reference

jQuery isn't creating table row elements

I'm creating a JavaScript progress bar and the bar itself and the detail message are inside a table. Now, I'm creating this so that all that needs to be in the page is a div and then the class will fill in the rest when it's created. Since it's in a table, the bar and message are supposed to be on different rows, however when I try to create the rows with jQuery they aren't getting generated and the only thing that is getting put in the tables is the two td elements.
The code I currently have is down below. I've tried several different methods to accomplish it that I thought would work.
I have tried using .wrap('<tr></tr>') to try and get it before I put it in the table, and in the call for the table too (i.e. tdMessage.wrap('<tr></tr>') and tdMessage.wrap('<tr></tr>').html()).
I have tried both document.createElement('tr') and just $('<tr></tr>') and calling .html() when putting it in the table.
I feel like there was another attempt in there too...but I can't think of what it was.
var tdMessage = $(document.createElement('td'));
tdMessage.prop('id', this.MessageId.substr(1));
tdMessage.css('text-align', 'center');
//tdMessage.wrap('<tr></tr>');
//var trRow2 = $(document.createElement('tr'));
var trRow2 = $('<tr></tr>');
trRow2.html(tdMessage);
tdMessage = null;
var divBar = $(document.createElement('div'));
divBar.prop('id', this.BarId.substr(1));
divBar.css('width', '0%');
divBar.css('height', '15px');
divBar.css('background', 'url(images/LoadingBarBG.gif)');
var tdBar = $(document.createElement('td'));
tdBar.css('border', '1px #B0B1B1 solid');
tdBar.css('padding', '1px');
tdBar.html(divBar);
//tdBar.wrap('<tr></tr>');
divBar = null;
//var trRow1 = $(document.createElement('tr'));
var trRow1 = $('<tr></tr>');
trRow1.html(tdBar);
tdBar = null;
var tblInner = $(document.createElement('table'));
tblInner.prop('width', '400');
tblInner.prop('cellpadding', '0');
tblInner.prop('cellspacing', '0');
tblInner.prop('border', '0');
tblInner.html(trRow1.html() + trRow2.html());
trRow1 = null;
trRow2 = null;
I'm probably just missing something, but I can't for the life of me figure it out. Everything looks like it should work, and everything else seems to be.
Also, the HTML that it keeps generating is either just putting both td elements in the table without the tr elements surrounding them or it will even just put the bars td and omit the message one.
Thanks for any help.

Don't use .html() because everything you have is a jQuery object, not raw HTML, instead append the cell to the row:
trRow2.append(tdMessage);
trRow1.append(tdBar);
Then append the rows to the table:
tblInner
.append(trRow1)
.append(trRow2);
Do the same with your div when you want to insert it into the cell:
tdBar.append(divBar);

How to select a td from a table with id using jQuery

I have a table with td's with id. I need to select those td's and reorder the columns.
$('table tr').each(function () {
var tr = $(this);
var tds = $('#Status');
var tdA = $('#Address');
alert(tds.innerHtml); //Here am getting a blank msg
tds.remove().insertAfter(tda); //This is what i need to do
});

I found the answer:
var tds = tr.find("td[id='Status']"); //what i was looking for
Thanks for ur support and special thanks for voting my genuine question 2 points down :D, since iam not point hungry, No offense :-)

var selectedTd = $("#ID_OF_TD");
or to call the method like on click etc etc you can directly call the method
$("#ID_OF_TD").click(function(){
});
you need to put this code in document ready section ..
$("document").ready(function(){
$("#ID_OF_TD").click(function(){
alert('td clicked');
});
});

Simply do $("#idHere").
More Info: http://api.jquery.com/category/selectors/

Use Id Selector
$('#tdID')
//^# followed by html id

Using jQuery apply: $('#td_ID')

we can use :
$('table > tr > td#Status');
$('table > tr > td#Address');

Using JQuery to switch selected row of table

I have a table. When a row is clicked on, it is given .active and the row is highlighted. I need to work on other ways to change the selected row other than clicking on it. For my example, I've chosen a next button.
http://jsfiddle.net/dHxKW/
I can do the logic behind what happens when it gets to the end of the table or anything else like that.
I just need help figuring out how to get the index of the TR with class active so that I can increase the index, which then I can give the next row the active class... That's all I need to do... how to get that row index.
This is some of the stuff I've tried that doesn't work...
alert( $('table tr .active').index() );
var row = $('table tr.active').first();
alert(row.index() );
alert($("table").index( $('table tr .active') ));
This is what I'm using as a reference (https://stackoverflow.com/a/469910/623952)
var index = $("table tr").index($(this));
but I can't get the selectors right...
Solution.....
it would have never worked... I wrote bad code:
$(this).children("tr").addClass("active"); (this = clicked on tr in the click function)
But new code:
http://jsfiddle.net/dHxKW
$("#table_one").on("click", "tr", function () {
$(".active").removeClass("active");
$(this).children("td").addClass("active");
// removed line: $(this).children("tr").addClass("active");
$(this).addClass("active");
});
$('#btn_next').on('click', function ()
{
// right here **********
var n = $('tr.active').next();
$(".active").removeClass("active");
n.children("td").addClass("active");
n.addClass("active");
});
** Just as a note, I am adding the class to both the tr and td's... I'm not sure if this is the best way but tr doesn't have background properties, so I just added it to both. I think this might be the reason for my confusion....

The issue is that the "active" class is not being added to the "tr" elements.
In this line you are looking for tr children of this, but this is a tr, thus no children get selected: $(this).children("tr").addClass("active");
Instead try $(this).addClass("active");

var counter = 0;
var index = -1
$('table tr').each(function(){
if( ! $(this).hasClass('active')) {
counter++;
}
else index = counter;
})

$('td.active').parent().index('tr')
will get you the index.
jsFiddle example
jsFiddle example 2
BTW, the link in your click function $(this).children("tr").addClass("active"); would seem to do nothing as it searches for a child row of a row.

$('table tr .active').removeClass('active').parent().next().children('td').addClass('active');
this should do it

load a div with custdata

I am loading a tr onclick the first tr but the problem is each td in the tr should load the different div which is inside the second div. Now the content which is inside the custdata is loading but how do I load the content which is inside the respective div??
Here is the demo
http://jsfiddle.net/FMnTa/6/

I am not sure if this is what you are asking for, but it seems like it.
$(function(){
$(".info").find("img").click(function(){
var trid = $(this).parent().attr("idcust");
var trdata = $(this).parent().attr("custdata");
// Hide all content divs and show only the one related to the click
$("#"+trid).children().hide();
$(trdata).show();
$("#"+trid).css("display","block");
});
});​
Here is a fiddle as well: http://jsfiddle.net/FMnTa/9/
The code could also be somewhat improved like this:
$(function(){
$("img", ".info").click(function(){
var parent = $(this).parent();
var trid = parent.attr("idcust");
var trdata = parent.attr("custdata");
// Hide all content divs and show only the one related to the click
$("#"+trid).show().children().hide();
$(trdata).show();
});
});​
Custom data attributes
When using custom attributes, you should really consider using the custom data attributes (data- attributes) instead. In your case the attributes would be data-idcust and data-custdata.
You could then use jQuery's .data() to get/set the attributes. Given that you name the attribute data-idcust you could read it with .data("custid") and set it with .data("custid", "newValue").

See what happen with this:
$(".info").find("img").click(function(){
var trid = $(this).parent().attr("idcust");
var trdata = $(this).parent().attr("custdata");
$("#"+trid).show().find(trdata).css('border', '1px solid red');
$("#"+trid).show().find(trdata).toggle();
});
find(trdata) find the tr1 div with id trdata

Generate a dynamic table in a <td>

function td(id)
{
var td=document.getElementById(id+'');
var table = document.createElement('table');
var tbody=document.createElement('tbody');
var tr = document.createElement('tr');
var tdchild = document.createElement('td');
tdchild.innerHTML="<input type=text name=txt size=2>";
tr.appendChild(tdchild);
tbody.appendChild(tr);
table.appendChild(tbody);
td.appendChild(table);
}
I want to generate a table in side a td on click of a button. Its not happening this way?

Your code looks correct to me, and it seems to work as expected.
Check this fiddle.
Are you sure you are calling the td function with the right ID, and that the ID is in the td element, and not in the table element?

That works for me. Do you have a click listener defined that will run this function? Does a td exist with the specified id?