动态生成的html表无法获取选定的td值

Question

我已经看过在多个谷歌和计算器的例子

我确实做了一个小提琴来演示我的问题。

问题陈述。 “我想在单击第一人的姓名时获得该人的姓名。” 我将鼠标悬停在上面，所以每行的类都以黄色突出显示，并且我可以让Jquery进行click事件 ，因此行得通，但是当我执行此代码时，它将为该列中的每一行吐出所有文本值

 $(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/

更多信息。

单击按钮“用动态表填充DIV”

同样在顶部，请注意一个STATIC，该顶部的名称可以正常工作，尽管只有一行

更新我需要在该行上使用别名，我在别名列的td上创建了一个新类，该如何获取？

http://jsfiddle.net/bthorn/7ck1m7q1/2/

Answer 1

你可以试试

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

并获得别名：

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

Answer 2

$(".nameField")将返回元素的节点列表。 使用this 。 小提琴

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

Answer 3

$（“。nameField”）将使用类“ nameField”获取所有td，而使用“ this”。

$(document).on('click', '.nameField', function () {
    //console.log('t');
    var x = $(this).text();

    //var x = $(this).parent(".nameField").text();
    console.log(x);

});

Answer 4

尝试使用此方法，获取tr，然后找到与其关联的.nameField

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

        });

Answer 5

大多数jquery函数确实可以识别动态生成的元素。

为此，您需要使用.live（）;函数。

$(document).live('click', '.nameField', function () {
        //console.log('t');
        var x = $(".nameField").text();

        //var x = $(this).parent(".nameField").text();
        console.log(x);

    });