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

Question

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

0

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

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

Как вы можете видеть, на этом изображении, если я нажму кнопку "Пуск", он должен показать мне первый идентификатор кластера в сообщении. Вот код, с которым у меня возникают проблемы:

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>

Prasanthi 02 дек. 2013, в 11:25

Источник

0

Кроме того, вы можете проверить правильность форматирования кода перед тем, как отправлять вопрос или ответ - он был отображен очень грязно, прежде чем я его исправил. Смотрите справочный центр для получения дополнительной информации.
Qantas 94 Heavy 02 дек. 2013, в 09:39
0

извините, сэр, на самом деле я разместил его впервые.
Prasanthi 02 дек. 2013, в 09:45

Теги:

javascript

jquery

html

3 ответа

0

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

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

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

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

Spokey 02 дек. 2013, в 08:32

0

Сожалею! Я не получаю. Все еще ..
Prasanthi 02 дек. 2013, в 09:45
0

Привет, Споки .. Вместо получения clusterid Я получаю "undefined" в окне предупреждения. Что это значит? На самом деле, я новичок в Jquery. Не могли бы вы помочь мне?
Prasanthi 02 дек. 2013, в 09:59
0

@ user3056704 не могли бы вы показать структуру HTML?
Spokey 02 дек. 2013, в 10:04
0

Спасибо за ответ ... Я дал весь свой код в этом текстовом поле. У меня нет отдельного HTML для этого. Я создал таблицу динамически.
Prasanthi 02 дек. 2013, в 10:37

Показать ещё 2 комментария

0

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

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

PKolos 02 дек. 2013, в 08:23

0

Спасибо. Колос .. за ответ на мой запрос.
Prasanthi 02 дек. 2013, в 10:43
0

Но у меня есть небольшое сомнение, что, где данные будут храниться, если мы напишем "console.log ($ (this) .closest ('tr'). Find ('# clustr'));" это утверждение.
Prasanthi 02 дек. 2013, в 10:44
0

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

Показать ещё 1 комментарий

Ещё вопросы

Кроме того, вы можете проверить правильность форматирования кода перед тем, как отправлять вопрос или ответ - он был отображен очень грязно, прежде чем я его исправил. Смотрите справочный центр для получения дополнительной информации.
извините, сэр, на самом деле я разместил его впервые.
Привет, Споки .. Вместо получения clusterid Я получаю "undefined" в окне предупреждения. Что это значит? На самом деле, я новичок в Jquery. Не могли бы вы помочь мне?
@ user3056704 не могли бы вы показать структуру HTML?
Спасибо за ответ ... Я дал весь свой код в этом текстовом поле. У меня нет отдельного HTML для этого. Я создал таблицу динамически.
Спасибо. Колос .. за ответ на мой запрос.
Но у меня есть небольшое сомнение, что, где данные будут храниться, если мы напишем "console.log ($ (this) .closest ('tr'). Find ('# clustr'));" это утверждение.
console.log предназначен только для отображения информации в консоли браузера, а не для хранения данных.

tamilmani · Accepted Answer · 2013-12-02T07-58-00.000Z

я не могу очистить свой код, но ясно понимаю, что вам нужно первое значение td.

проверьте: http://jsfiddle.net/ke7VN/

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

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


 });

Спасибо тебе .. дорогой тамильмани .. за ответ на мой вопрос ..
Пожалуйста, помогите мне узнать, куда поступают данные, когда мы нажмем кнопку пуска.
Большое спасибо дорогой .. я понял ..