Как получить значение ячейки в динамической таблице при нажатии ссылки с помощью jquery?

Я хочу получить соответствующий идентификатор клиента, когда я нажимаю соответствующую ссылку в таблице. Я не могу получить значение идентификатора кластера в цикле for.Как получить значение ячейки в динамической таблице при нажатии ссылки с помощью jquery?

Я использовал JQuery для создания динамической таблицы и простой HTML:

Как вы можете видеть, в этом образе, если нажать на кнопку Start он должен показать мне первый кластер 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>

источник

2013-12-02 Prasanthi

Кроме того, вы можете проверить правильность форматирования кода перед отправкой вопроса или ответа - он был отображен крайне беспорядочно, прежде чем я его исправил. Дополнительную информацию см. В [help]. –

извините, сэр, на самом деле я отправил его в первый раз. – Prasanthi

я не могу очистить codeing но четко понимать и нужно первое значение TD .try этой проверки

: http://jsfiddle.net/ke7VN/

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

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


});

источник

2013-12-02 09:45:08 tamilmani

Спасибо u..dear tamilmani..for ответа на мой запрос. – Prasanthi

Plz поможет мне узнать, куда будут поступать данные, когда мы нажимаем на кнопку button.plz help me .. – Prasanthi

Спасибо большое, дорогой..и получил это .. – Prasanthi

Поскольку вы Добавляя таблицы динамически, что нужно использовать делегирование событий

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

Структура как этот

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

источник

2013-12-02 09:37:03 Spokey

Извините! Iam not getting.still .. – Prasanthi

Привет, Spokey .. Вместо получения кластеров я получаю «неопределенный» в поле предупреждения. Что это значит? На самом деле, я новичок в JQuery. Не могли бы вы мне помочь? – Prasanthi

@ user3056704 можете ли вы показать структуру HTML? – Spokey

Самый лучший способ, чтобы получить родительское тр а затем #clustr

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

источник

2013-12-02 10:01:21 PKolos

Спасибо u..PKolos..ответ на мой запрос. – Prasanthi

Но у меня мало сомнений в том, что где данные будут сохранены, если мы напишем «console.log ($ (this) .closest ('tr'). Find ('# clustr'));" это утверждение. – Prasanthi

console.log предназначен только для отображения информации в консоли браузера, а не для хранения данных. – PKolos

Как получить значение ячейки в динамической таблице при нажатии ссылки с помощью jquery?

ответ

Смежные вопросы