stackoom
  简体   繁体   中英

How to get the value of cell in dynamic table when a link is clicked using jquery?

 原文  2013-12-02 09:27:31  8   3    javascript/ jquery/ html

Question

I want to get the respective customer ID when I click on respective link in the table. I am unable to get the value of cluster ID in the for loop.

I used jQuery to create a dynamic table and simple HTML:

As you can see, in that image, if I click on the Start button it should show me first cluster ID in an alert. Here's the code that I'm having issues with: 

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

});

And here's my full HTML code: 

<%@ 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>

3 answers

solution1
 0  2013-12-02 09:37:03

Since you are appending the table dynamically you need to use event delegation 

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

Structure as this 

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

solution2
 0 ACCPTED  2013-12-02 09:45:08

i cant clear your codeing but clearly understand u need first td value .try this

check : http://jsfiddle.net/ke7VN/ 

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

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


 });

solution3
 0  2013-12-02 10:01:21

The best way is to get parent tr and then #clustr 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to get the value from a cell when table row is clicked How to get select text, table cell value when a button is clicked jQuery, Copy hyper-link value when clicked on it in table from one cell to another in the same row How to get the table cell of a row that was clicked with JQuery how to update a value in database using jquery when a link is clicked in php how to dynamically change a table row background color when a link value within its cell changes when clicked how to get a particular cell value from dynamic table using javascript How to get a value of inner element when clicked on li using JQuery How to get the value of input field when button clicked using jquery? How to fetch contents of clicked cell in a dynamic table using javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM