Question

当我点击表格中的相应链接时，我想获得相应的客户ID。我无法在for循环中获得集群ID的值。

我使用jQuery创建动态表和简单的HTML：

正如您所看到的，在该图像中，如果我单击“开始”按钮，它应该在警报中显示第一个群集ID。这是我遇到问题的代码：

for (i = 1; i <= 3; i++) {
    var row = $('<tr></tr>').attr({
        class: ["class1", "class2", "class3"].join(' ')
    }).appendTo(mytable);
    var clusterid = "cluster" + i;


    $('<td><span align="center" valign="middle" id="clustr"></span></td>').text(clusterid).appendTo(row);
    $('<td><span align="center" valign="middle"></span></td>').text(sizen).appendTo(row);
    $('<td><span align="center" valign="middle"></span></td>').text(status).appendTo(row);
    $('<td><span align="center" valign="middle"></span></td>').text(type).appendTo(row);
    $('<td><span align="center" valign="middle"></span></td>').text(startdate).appendTo(row);
    $('<td><span align="center" valign="middle"></span></td>').html("<u><a target='_blank' href='" + url + "'>view hdfs</a><br><a href>view jobtracker</a><br><a href>view tasktracker</a></u>").appendTo(row);
    $('<td><span align="center" valign="middle" class="clickclass"></span></td>').html('<a href="#" id="anc" role="button"  class="btn btn-info">start</a>').appendTo(row);
    console.log("TTTTT:" + mytable.html());
    mytable.appendTo("#box");


    //alert(id);
} //for
$(function () {

    $('.btn').on('click', function () {
        var button = $(this);
        //alert(button);
        var parentTd = button.parent('td');
        //alert(parentTd);
        var parentTr = parentTd.parent('tr');
        //alert(parentTr);
        //alert(clusterid);
        var nombre = parentTr.find('td #clustr').html();
        // alert($row.find('td:eq(1)').html());
        alert(nombre);
    });

});

这是我的完整HTML代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" href="styles/bootstrap.css"></link>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="styles/jquery.js"></script>
    <script src="styles/bootstrap-dropdown.js"></script>
    <script>
        $(document).ready(function () {
            $("#sample").prepend(
                "<div style='color:#6495ED' id='totinsinfo'> <center><h2>Cluster Information</h2></center> </div>");
            mytable = $('<table id="s"  border="2" style="width:947px;"><th bgcolor="#00BFFF"><h4>Cluster_Id</h4></th><th bgcolor="#00BFFF"><h4>Size(Nodes)</h4></th><th bgcolor="#00BFFF"><h4>Status</h4></th><th bgcolor="#00BFFF"><h4>Type</h4></th><th bgcolor="#00BFFF"><h4>Start_Date</h4></th><th bgcolor="#00BFFF"><h4>Clusterlinks</h4></th><th bgcolor="#00BFFF"><h4>Action</h4></th></table>').attr({
                id: "basicTable"
            });
            var i = 1;
            var sizen = "null";
            var startdate = "null";
            var status = "null";
            var type = "null";
            var url = "null";

            for (i = 1; i <= 3; i++) {
                var row = $('<tr></tr>').attr({
                    class: ["class1", "class2", "class3"].join(' ')
                }).appendTo(mytable);
                var clusterid = "cluster" + i;


                $('<td><span align="center" valign="middle" id="clustr"></span></td>').text(clusterid).appendTo(row);
                $('<td><span align="center" valign="middle"></span></td>').text(sizen).appendTo(row);
                $('<td><span align="center" valign="middle"></span></td>').text(status).appendTo(row);
                $('<td><span align="center" valign="middle"></span></td>').text(type).appendTo(row);
                $('<td><span align="center" valign="middle"></span></td>').text(startdate).appendTo(row);
                $('<td><span align="center" valign="middle"></span></td>').html("<u><a target='_blank' href='" + url + "'>view hdfs</a><br><a href>view jobtracker</a><br><a href>view tasktracker</a></u>").appendTo(row);
                $('<td><span align="center" valign="middle" class="clickclass"></span></td>').html('<a href="#" id="anc" role="button"  class="btn btn-info">start</a>').appendTo(row);
                console.log("TTTTT:" + mytable.html());
                mytable.appendTo("#box");


                //alert(id);
            } //for
            $(function () {
                $('.btn').on('click', function () {
                    var button = $(this);
                    //alert(button);
                    var parentTd = button.parent('td');
                    //alert(parentTd);
                    var parentTr = parentTd.parent('tr');
                    //alert(parentTr);
                    //alert(clusterid);
                    var nombre = parentTr.find('td #clustr').html();
                    // alert($row.find('td:eq(1)').html());
                    alert(nombre);
                });
            });
        });
    </script>
</head>
<body style="margin-top: 46px;">
    <div class="span9" id="sample">
        <div id="box" style="margin-right: -189px;"></div>
        <div class="span8" id="empty"></div>
    </div>
</body>
</html>

Answer 1

由于您要动态附加表，因此需要使用事件委派

$('#sample').on('click', '.btn', function () { ... });

结构如此

$('static element').on('event', 'dynamic element', function(){ ... });

Answer 2

我无法清除你的编码，但清楚地明白你需要第一个td值。这个

检查：http://jsfiddle.net/ke7VN/

 $('.btn').on('click', function () {

     console.log( $(this).parent().parent().find('td:first').text());


 });

Answer 3

最好的方法是获得父tr，然后是#clustr

 $('.btn').on('click', function () {
     console.log($(this).closest('tr').find('#clustr'));
 });

使用jquery单击链接时如何获取动态表中单元格的值？

3 个答案: