dynamically generted html table cannot get selected td value

Question

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/

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 — , Oct 23 '15 at 18:21

Alon Eitan · Accepted Answer · 2015-10-23T19:44:32.693

4

You can try

var x = $(this).text();

And to get the alias:

var x = $(this).siblings('.alias').text();

edited Oct 23 '15 at 19:44

answered Oct 23 '15 at 18:03

Alon Eitan

11,997
8
49
58

I actually need to get the text in the td column for alias instead I added an class to this td " + issues.ALIAS_NAME + " How can I get that? – Oct 23 '15 at 19:37

score 3 · Answer 2 · answered Oct 23 '15 at 18:06

$(".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>

I actually need to get the text in the td column for alias instead I added an class to this td " + issues.ALIAS_NAME + " How can I get that? — , Oct 23 '15 at 19:37

score 1 · Answer 3 · answered Oct 23 '15 at 18:05

1

$(".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

282
1
4

I actually need to get the text in the td column for alias instead I added an class to this td " + issues.ALIAS_NAME + " How can I get that? – Oct 23 '15 at 19:37

score 0 · Answer 4 · answered Oct 23 '15 at 18:04

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

        });

score 0 · Answer 5 · answered Oct 23 '15 at 18:54

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

    });

dynamically generted html table cannot get selected td value

5 Answers5

Linked