dynamically generted html table cannot get selected td value
up vote
1
down vote
favorite
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/
javascript jquery html css
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
add a comment |
up vote
1
down vote
favorite
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/
javascript jquery html css
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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/
javascript jquery html css
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
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/
javascript jquery html css
javascript jquery html css
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
edited Oct 23 '15 at 18:22
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
asked Oct 23 '15 at 18:01
Brian Thornton
73931427
73931427
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21
add a comment |
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21
add a comment |
5 Answers
5
active
oldest
votes
up vote
5
down vote
accepted
You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
add a comment |
up vote
4
down vote
$(".nameField")will return you nodelist of elements. Usethis. 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>answered Oct 23 '15 at 18:06
Rayon
30.2k42444
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
2
down vote
$(".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);
});
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:04
Jesse
1,0471519
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
add a comment |
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
accepted
You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
add a comment |
up vote
5
down vote
accepted
You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
add a comment |
up vote
5
down vote
accepted
up vote
5
down vote
accepted
You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
You can try
var x = $(this).text();
And to get the alias:
var x = $(this).siblings('.alias').text();
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
edited Oct 23 '15 at 19:44
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
answered Oct 23 '15 at 18:03
Alon Eitan
11.1k63652
11.1k63652
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
add a comment |
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
@BrianThornton - I've updated my answer
– Alon Eitan
Oct 23 '15 at 19:45
1
1
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
YES fantastic! thx again
– Brian Thornton
Oct 23 '15 at 19:48
add a comment |
up vote
4
down vote
$(".nameField")will return you nodelist of elements. Usethis. 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>answered Oct 23 '15 at 18:06
Rayon
30.2k42444
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
4
down vote
$(".nameField")will return you nodelist of elements. Usethis. 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>answered Oct 23 '15 at 18:06
Rayon
30.2k42444
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
4
down vote
up vote
4
down vote
$(".nameField")will return you nodelist of elements. Usethis. 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>answered Oct 23 '15 at 18:06
Rayon
30.2k42444
$(".nameField")will return you nodelist of elements. Usethis. 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>$('.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>$('.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>answered Oct 23 '15 at 18:06
Rayon
30.2k42444
answered Oct 23 '15 at 18:06
Rayon
30.2k42444
answered Oct 23 '15 at 18:06
Rayon
30.2k42444
answered Oct 23 '15 at 18:06
Rayon
30.2k42444
30.2k42444
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
2
down vote
$(".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);
});
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
2
down vote
$(".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);
});
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
2
down vote
up vote
2
down vote
$(".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);
});
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
$(".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);
});
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
answered Oct 23 '15 at 18:05
Prabhas Nayak
21414
21414
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
I actually need to get the text in the td column for alias instead I added an class to this td <td class='alias'>" + issues.ALIAS_NAME + "</td> How can I get that?
– Brian Thornton
Oct 23 '15 at 19:37
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:04
Jesse
1,0471519
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:04
Jesse
1,0471519
add a comment |
up vote
0
down vote
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:04
Jesse
1,0471519
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);
});
answered Oct 23 '15 at 18:04
Jesse
1,0471519
answered Oct 23 '15 at 18:04
Jesse
1,0471519
answered Oct 23 '15 at 18:04
Jesse
1,0471519
answered Oct 23 '15 at 18:04
Jesse
1,0471519
1,0471519
add a comment |
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
add a comment |
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
add a comment |
up vote
0
down vote
up vote
0
down vote
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);
});
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
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);
});
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
answered Oct 23 '15 at 18:54
Arthur Medeiros
465
465
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33308720%2fdynamically-generted-html-table-cannot-get-selected-td-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I do see correct answers. I need to actually update my question as I now realize that upon clicking on their name, i NEED to get their ALIAS
– Brian Thornton
Oct 23 '15 at 18:21