jQuery Populate content inside a new element before appending it - javascript

I'm trying to populate featured with data then append it to #wrapper. This isn't working for me. What am i doing wrong?
var featured = '<div id="featured"></div>';
$('#imageTable tbody tr td img').each(function(){
$(featured).append($(this).attr('src'));
});
$(featured).appendTo('#wrapper');

var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src')).append('<br />');
});
$featured.appendTo('#wrapper');
Explaination:
When you do this inside the loop $(featured), it creates a NEW div for each selected element, so only the last div will be appended to your #wrapper. You need to create the jQuery object outside of the each loop.

It's because you have the $(featured) call inside the loop. You only want to call it once.
Try this:
var $featured = $('<div id="featured"></div>');
$('#imageTable tbody tr td img').each(function(){
$featured.append($(this).attr('src'));
});
$featured.appendTo('#wrapper');

Very Similar to Bryan Ross's, just creating the div in a more efficient manner. It may not be as straight forward, but I believe it is more performant.
var $f = $('<div>',{id:'featured'});
$('img,#imageTable > td').each(function(i){
$f.append($(this).attr('src');
})
$f.appendTo('#wrapper');

Related

Scroll table row to top of div by clicking the row

Basically, I have a table that has many rows. What I want to do is scroll the row I click to the top of the div that encases the table.
Here is the StackOverflow question I started from:
How to scroll table to particular tr programmatically
Basically, this person was able to make the table jump to the table row he wanted by manually putting the in nth-child number like so:
var s = $("table tbody > tr:nth-child(20)").position();
$( "div" ).scrollTop( s.top );
Here is the fiddle he worked on showing it working for manually setting the nth-child in the code: http://jsfiddle.net/4Z7Z9/
Here is how I changed the code:
function scrollThisToTop(row) {
var s = $("table tbody > tr:nth-child(" + row + ")").position();
$( "div" ).scrollTop( s.top );
}
Here is my fiddle I am working on: http://jsfiddle.net/4Z7Z9/210/
Any help greatly appreciated!
I was able to get it working in 3 simple steps. Checkout the solution in fiddle HERE
You will need to add on click functionality as well as and ID for your containing div.
The new Function:
function scrollThisToTop(row) {
// Get the id of the row
var myElement = row.id;
// Get the variable for the top of the row
var topPos = row.offsetTop;
// The container div top to the row top
document.getElementById('container').scrollTop = topPos;
}
On click functionality:
$('tr').on("click", function () {
scrollThisToTop(this);
});
Div id:
<div id="container">
This helps you?
$('table tr').bind('click', function() {
var s = $('table').position();
$('div').scrollTop(s);
});

Appending to new nodes not yet inserted in the document

In order to make my code concise and reduce unnecessary dom rendering, I'm trying to construct and populate a table before appending it to the document. The problem I'm having is that only the divs are getting appended to the table, so I end up with a table full of divs instead of tr's with td's that contain divs.
I'm pretty sure this is because when I use the .appendTo function it's not appending the td to the tr, and the tr to the table but instead is removing the div and appending it to each in turn, lastly ending up in the table.
How can I construct a node chain before appending to the document?
Code:
var playerSelect = $( "#playerSelect" );
var playerElements = [];
var rowCounter = 0;
var playerTable = $("<table/>").attr("id", "playerTable");
for (player in playerBase){
var playerDiv = $("<div/>").addClass("player").text(player + playerBase[player].rating);
playerDiv.appendTo("<td/>").appendTo("<tr/>").appendTo(playerTable);
};
playerSelect.append( playerTable );
.appendTo() does not accept a string value. $() does however, so you could change your code like this:
$("<tr />").append($("<td />").append(playerDiv)).appendTo(playerTable);
That said, this is not the cleanest way to do it, you might want to have a look at templating engines if you have a lot of these structures in your code.
for (player in playerBase){
var tr = $('<tr/>');
var td = $('<td/>');
td.appendTo(tr);
var playerDiv = $("<div/>").addClass("player").text(player + playerBase[player].rating);
playerDiv.appendTo(td);
tr.appendTo(playerTable);
};

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

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?

Categories

Resources