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

时间:2015-10-23 18:01:26

标签: javascript jquery html css

我查看了 MANY google和stackoverflow示例

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

问题陈述。 "我希望在点击他们的名字时在第一栏中获得该人的姓名。" 我已经将它翻转为每一行的高亮显示黄色和 I可以让Jquery执行点击事件,这样就行了,但是当我执行此代码时,它会为该列中的每一行吐出所有文本值

 $(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的那个在顶部的工作,以使名称没有问题,好,只有一行,但

更新我在该行上需要ALIAS我在别名列中的td上创建了一个新类,我该怎么做?

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

5 个答案:

答案 0 :(得分:5)

你可以尝试

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

获得别名:

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

答案 1 :(得分:4)

  

$(".nameField")将返回元素的节点列表。使用thisFiddle

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

答案 2 :(得分:2)

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

});

答案 3 :(得分:0)

试试这个,获取tr,然后找到与之关联的.nameField

{{1}}

答案 4 :(得分:0)

大多数jquery函数都会识别动态生成的元素。

为此,您需要使用函数.live();

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

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

    });