We Keep Coding

dynamically generted html table cannot get selected td value

I have looked at MANY google and stackoverflow examples
I did create a fiddle to demonstrate my problem.
Problem statement. "I want to get the name of the person in the first column upon clicking on their name." I have it so on rollover the class for each row highlights in yellow and I CAN get Jquery to do a click event and so that works, but when I do this code it spits out all of the text values for every row in that column
$(document).on('click', '.nameField', function () {
//console.log('t');
var x = $(".nameField").text();
//var x = $(this).parent(".nameField").text();
console.log(x);
});
http://jsfiddle.net/bthorn/7ck1m7q1/2/
More Info.
Click on the button "Fill DIV with Dynamic Table"
Also at the top , notice a STATIC one that on there at the top works to get the name no problem, well there is only one row though
UPDATE I NEED ALIAS on that row I created a new class on the td in the alias column, How can I get at that?
http://jsfiddle.net/bthorn/7ck1m7q1/2/

You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();

$(".nameField") will return you nodelist of elements. Use this. Fiddle
$('.person').on('click', function() {
var x = $(".person").text();
console.log(x);
});
$(document).on('click', '.nameField', function() {
var x = $(this).text();
console.log(x);
});
$('#fillTable').click(function() {
var data = [{
'Email': 't.Miller#companyemail.com',
'LastFirst': 'abcsaker,b',
'FIRST_NAME': 'b',
'INITIALS': 'W ',
'LAST_NAME': 'abcsaker',
'ALIAS_NAME': 'BWabcSAK',
'OFFICE': 'sdfdf ',
'TITLE': 'rrr EQUIPMENT 3',
'DEPARTMENT': 'Construction East',
'EMPLOYEE_NUMBER': '444 '
}, {
'Email': 'abcter.plethcer#companyemail.com',
'LastFirst': 'stillman,abcter',
'FIRST_NAME': 'abcter',
'INITIALS': 'A ',
'LAST_NAME': 'Streeper',
'ALIAS_NAME': 'HASTREEP',
'OFFICE': 'adfafd ',
'TITLE': 'TRADES HELPER 2ND YEAR',
'DEPARTMENT': 'ee Locating - West',
'EMPLOYEE_NUMBER': '6666 '
}, {
'Email': 'brad.abckele#companyemail.com',
'LastFirst': 'abckele,brad',
'FIRST_NAME': 'brad',
'INITIALS': 'J ',
'LAST_NAME': 'abckele',
'ALIAS_NAME': 'CJabcKEL',
'OFFICE': 'adffg ',
'TITLE': 'DESIGNER d SR - (asfe)',
'DEPARTMENT': 'afe Design A',
'EMPLOYEE_NUMBER': '999 '
}];
writeRegister(data);
});
function writeRegister(allData) {
//console.log(allData);
//$('#matchText').text(allData.length + ' matches.');
var strResult = "<table id='headerTable' class='table'><thead id='headers'><th>Name</th><th>Office</th><th>Title</th><th>Department</th><th>Alias</th>";
$.each(allData, function(index, issues) {
strResult += "<tr><td class='nameField'> <a href='#'>" + issues.LAST_NAME + " " + issues.FIRST_NAME + " " + issues.INITIALS + "</a></td><td>" + issues.OFFICE + "</td><td>" + issues.TITLE + "</td>";
strResult += "<td>" + issues.DEPARTMENT + "</td><td>" + issues.ALIAS_NAME + "</td>";
strResult += "</tr>";
});
strResult += "</table>";
$("#divEmpResult").html(strResult);
}
td.person {
color: red;
}
.person:hover {
color: red !important;
background-color: yellow;
}
.nameField:hover {
color: red !important;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="person"><a href='#'>Miller Bob T</a>
</td>
</tr>
</table>
<!-- dynamic table generation is the problem -->Fill the DIV with dynamically created TABLE
<input type="button" id="fillTable" value="Fill DIV with Dynamic Table">
<div id="divEmpResult" style="margin-left: 15px"></div>

$(".nameField") will get all the td's with the class "nameField", instead use "this".
$(document).on('click', '.nameField', function () {
//console.log('t');
var x = $(this).text();
//var x = $(this).parent(".nameField").text();
console.log(x);
});

Try this instead, get the tr, and then find the .nameField associated with it
$(document).on('click', 'tr', function () {
//console.log('t');
var that = $(this);
var x = that.find($(".nameField")).text();
//var x = $(this).parent(".nameField").text();
console.log(x);
});

Most of the jquery functions doenst recognize dynamically generated elements.
To do that you need to use the function .live();
$(document).live('click', '.nameField', function () {
//console.log('t');
var x = $(".nameField").text();
//var x = $(this).parent(".nameField").text();
console.log(x);
});

How do I expand <tr> width or combine <td> cells in this css / jquery widget?

I'm using a fantasy football website with this custom widget.
Site is here, css is here, though there's plenty of other CSS being inherited.
I'd like all the icons displayed horizontally within the top row of the table.
I have set up a row for the icons, but they're still forced within a narrow column, each icon appearing to own its own row. My best guess is that it's this "function createColumnLeft(fpid)" part of the widget code:
function createColumnLeft(fpid)
{
var htmlComponent_s = '<table>';
var htmlComponent_e = '</table>';
var temoComp = '';
for(var i=0;fpid!=null && i<fpid.length ;i++) {
if(!(middleFranchise!='' && fpid[i].id == middleFranchise)) {
var fdb = franchiseDatabase['fid_'+fpid[i].id];
if(fdb instanceof Franchise) {
temoComp += '<td class="left_m" id="left_menu_'+fdb.id+'">';
var displayName = '';
if(useIcons) {
temoComp+='<td>';
if(fdb.icon == null || fdb.icon.trim() == '') {
displayName = fdb.name;
}
else {
displayName = '<img src="' + fdb.icon + '"class="franchiseicon" title="' + fdb.name + '" />'
}
}
else {
temoComp+='<td class="teamname">';
displayName = fdb.name;
}
temoComp = temoComp + '' + displayName +'' ;
temoComp = temoComp + '</td></tr>';
}
}
}
return htmlComponent_s+temoComp+htmlComponent_e;
}

#roster_column_left table tbody tr {
display: inline;
float: left;
}

Actually, it doesn't seem like a CSS problem. It looks like the code above is creating a new row for each array element.
htmlComponent_s & htmlComponent_e are beginning and terminating tags, and because there's a terminating tag in this line:
temoComp = temoComp + '</td></tr>';
... that's causing the DOM parser to assume that you meant one row per icon. You really need to be explicitly creating a row, then creating a per icon.

Need index number of item in array on hover

I'm relatively new to JavaScript and I'm working on what should be a simple project. I'm stuck though and I'd love some opinions on ways to get a solution.
I have a short products array like:
var products = [
{
name: "paper",
price: 2.00,
description: "White College-ruled Paper, 100 sheets",
location: "Aisle 5"
},
{
name: "pens",
price: 5.00,
description: "10 Pack, Black Ink Ball Point Pens"
location: "Aisle 2"
},
{
name: "paper clips",
price: 0.50,
description: "Silver Paper Clips, 100 count"
location: "Aisle 6"
}
]
I'm looping through this array using JS and printing the results to the page in a DIV with id of "output".
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
for (var i = 0; i < products.length; i += 1) {
product = products[i];
message += '<div class="col-md-4" id="prod-block">';
message += '<p id="prod-description">' + product.name + ' ' + product.description + '</p>';
message += '<h2 id="price">$' + product.price + '</h2>';
message += '</div>'
}
print(message);
All of this works just fine. I have my products on the page. Now, what I want is when the mouse hovers over any of the item divs, to show additional information (such as location) in a separate div.
My question is - how do you identify the index number of the item that is being hovered over? As of now, the index number only exists in my for loop and I can't figure out how to access it in a different function.
Again, my knowledge is limited, so I'm not sure if writing the HTML in a for loop is even the best way to do this. I really appreciate any advice or criticism!!

Here's something that should help.
I updated your list to include an id attribute and I used that to assign a data attribute to the div that is being created. On hover it looks for the data-prodid and displays that in the additional section.
Fiddle
var products = [{
id: 0,
name: "paper",
price: 2.00,
description: "White College-ruled Paper, 100 sheets",
location: "Aisle 5"
}, {
id: 1,
name: "pens",
price: 5.00,
description: "10 Pack, Black Ink Ball Point Pens",
location: "Aisle 2"
}, {
id: 2,
name: "paper clips",
price: 0.50,
description: "Silver Paper Clips, 100 count",
location: "Aisle 6"
}],
message = '';
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
for (var i = 0; i < products.length; i += 1) {
product = products[i];
message += '<div data-prodid="' + product.id + '" class="col-md-4" id="prod-block">';
message += '<p id="prod-description">' + product.name + ' ' + product.description + '</p>';
message += '<h2 id="price">$' + product.price + '</h2>';
message += '</div>'
}
print(message);
$('.col-md-4').hover(function() {
$('#additional').html($(this).data('prodid'));
});
Also
The javascript you posted has an error in your products variable and message was never declared.

try to add a tip tool as and when you create the div with the index number you want.
<div title="The index number">

There is something really wrong in your code: the abuse of id. Many elements will have the id prod-block, prod-description but an id has to be unique.
Doing this, you can easily detect which element is hovered just by checking the id. There is multiple techniques to do that, if you want to learn jQuery this is really easy to start this way.

If you use jQuery, you could use data() to define the data attribute of the DOM element, but you shoudl also use jQuery to add this element to the DOM.
$.each(products, function(i, product) {
// Create DOM element
var _ = $('<div class="col-md-4" id="prod-block">'
+ '<p id="prod-description">' + product.name + ' ' + product.description + '</p>'
+ '<h2 id="price">$' + product.price + '</h2>'
+ '</div>');
// Set product data
_.data("product", product);
// Add element to the DOM
$("#output").append(_);
});

There are multiple options here, such as adding the data as an attribute of the element, but I believe your best option is to create the HTML elements explicitly so you can attach event listeners to them, then append them to the DOM; this would be instead of setting the innerHTML of the output div element to a string representation of the desired HTML.
var output = document.getElementById("output");
var hoverOutput = document.getElementById("hovertext");
for (var i = 0, len = products.length; i < len; i++) {
product = products[i];
var newDiv = document.createElement("div");
newDiv.className = "col-md-4";
newDiv.innerHTML = '<p class="prod-description">' + product.name + ' ' + product.description + '</p><h4 class="price">$' + product.price + '</h4>';
(function() {
var num = i;
var target = hoverOutput;
newDiv.onmouseover = function() {
target.innerHTML = num;
};
})();
output.appendChild(newDiv);
}
Check out the working example below:
var products = [{
name: "paper",
price: 2.00,
description: "blah blah",
location: "aisle 5"
}, {
name: "paper clips",
price: 0.5,
description: "blah bloo blab",
location: "aisle 6"
}];
var output = document.getElementById("output");
var hoverOutput = document.getElementById("hovertext");
for (var i = 0, len = products.length; i < len; i++) {
product = products[i];
var newDiv = document.createElement("div");
newDiv.className = "col-md-4";
newDiv.innerHTML = '<p class="prod-description">' + product.name + ' ' + product.description + '</p><h4 class="price">$' + product.price + '</h4>';
(function() {
var num = i;
var target = hoverOutput;
newDiv.onmouseover = function() {
target.innerHTML = num;
};
})();
output.appendChild(newDiv);
}
#hovertext {
font-weight: bold;
color: red;
min-height: 10px;
}
#output div {
border: 1px solid black;
}
.col-md-4{line-height:.2em;}
<div id="output"></div>
<div id="hovertext">Hover over an item to see its index here</div>

Accordion header content

I have created accordion in javascript. I would like to make accordion header content size smaller (50% percent). However I could not able to figure that out.
$.each(myData.offsetFormations, function(i,aut) {
headerList = '<h3><ul><li contenteditable="true">'+
'<text class="formationName">'+ aut.FormationName + '</text>'+
' | ' +
'<text class="bitSize">'+this.BitSize.toFixed(2) + '</text>'+
' | ' +
'<text class="bitType">'+this.BitType + '</text>'+
'</li></ul></h3>';
wellNameList = '<div class="table-holder"><table>';
$.each(myData.wellList, function(k,mano){
if(aut.AssociatedwellList.some(function(w) { return w.WellName === mano.WellName; }))
{
wellNameList += '<td><div>'+ mano.WellName+'</div></td>';
}
else
{
wellNameList += '<td style="color:gray;" ><div>'+ mano.WellName+'</div></td>';
}
});
wellNameList += '</table></div>';
headerList += '<div>'+wellNameList +'</div>';
$(headerList).appendTo('#accordion');
});

By default, ul elements have a 1em top and bottom margin, which is causing your boxes to have an additional 2em of height.
You can remove this with:
.ui-accordion ul {
margin: 0;
}
Updated fiddle: http://jsfiddle.net/xg7cr0g4/44/

display images based on rating in javascript

I have a script which displays ratings out of 10:
overallRating = Ratings.RoundToHalf( ( convenience + quality + rebook )/3 );
This returns a value such as 1 or 1.5 etc.
What I would like to do is display star images based on the returned rating, but only up to 5 stars instead of 10.
How would I do this by using an if statement, for example:
if overallRating = 1 {
row = "<img src='star1.png' />";
}
if overallRating = 1.5 {
row = "<img src='star1.png' />";
}
etc
This is the part of my script that displays the results:
if ( overallRating > 0 )
row = row + '<td align="center">' + overallRating + "/10</td>";
else
row = row + '<td align="center">N/A</td>';
row = row + "</tr>";
Any help would be great! Thanks.

Generally developers use a sprite image in the background of a div and position the background-image of the stars.
If you wanted to show 1-5 stars and round down to the nearest star like how you originally wanted to approach the problem, you can write something like this:
var rating = Math.floor(overallRating);
if (rating) {
var img = "";
for(var i=0; i < rating; i++) {
img = img + "<img src='star1.png' />";
}
row = '<tr>' + '<td align="center">' + img + "/10</td>";
}
else {
row = '<tr>' + '<td align="center">N/A</td>';
}
row = row + "</tr>";
If you want to create a rating system the proper way, please check out this link: Turn a number into star rating display using jQuery and CSS