Блог

Главная - Вопросы по программированию - Считывание значений из идентификаторов td из таблицы

Считывание значений из идентификаторов td из таблицы

#jquery

#jquery

Вопрос:

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

 <table>
    <tr>
      <td id="Name">111</td>
      <td id="surname">aaaa</td>
      <td><input type="button" id="edit" value="edit"/></td>
    </tr>
    <tr>
      <td id="Name">123</td>
      <td id="surname"></td>vvv
      <td><input type="button" id="edit" value="edit"/></td>
    </tr>
    <tr>
      <td id="Name">122</td>
      <td id="surname">vvvvv</td>
      <td><input type="button" id="edit" value="edit"/></td>    
    </tr>
</table>

Комментарии:

1. У вас не может быть нескольких элементов с одинаковым идентификатором.. Вместо этого вам следует использовать class , что позволило бы вам использовать $$('.className') для получения всех элементов с определенным именем класса

2. К сожалению, ваша HTML-разметка полна ошибок. Id-атрибуты всегда уникальны во всем документе, но вы используете id «фамилия» и «редактировать» несколько раз. Вместо этого используйте классы, их использование не ограничено. Чего именно вы хотите достичь? Хотите считывать идентификаторы при нажатии кнопки или значение td-поля?

Ответ №1:

попробуйте

js

 $(document).ready(function(){   
    $('input[type=button]').click ( function () {
        var fName = $(this).parents("tr").find("td.Name").html();
        var surName = $(this).parents("tr").find("td.surName").html();
        alert('nName:' fName  ' surName:' surName  'n');
});

пересмотренный HTML:

 <table border=1 cellpadding=5>
    <tr>
        <td class="Name">111</td>
        <td class="surName">aaaa</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surName">vvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surName">vvvvv</td>
        <td><input type="button" id="edit" value="edit"></td>
    </tr>

ДЕМОНСТРАЦИЯ

Комментарии:

1. Пример отличный, но пересмотренный HTML-код должен решить проблему неуникального идентификатора — т. Е. Ответ не должен включать что-то неправильное. (идентификатор = «Name» используется несколько раз)

2. Поскольку parents() вернет всех предков, предпочтительно использовать closest().

Ответ №2:

Есть несколько проблем с вашей разметкой. Во-первых, идентификаторы всегда должны быть уникальными. Если вы хотите применить общее имя к нескольким элементам, то класс был бы лучшей идеей. Также вам, похоже, не хватает некоторых строк таблицы. Предполагая, что это исправлено, вы сможете получить доступ к требуемому значению несколькими способами: 

 <table> 
    <tr>
        <td class="Name">111</td>
        <td class="surname">aaaa</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td> 
    </tr>
    <tr>
        <td class="Name">123</td>
        <td class="surname">vvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
    <tr>
        <td class="Name">122</td>
        <td class="surname">vvvvv</td>
        <td>
            <input type="button" class="edit" value="edit">
        </td>
    </tr>
</table>

Предполагая, что это разметка, тогда: 

 $('.edit').click(function() {
    var idVal = $(this).parent().siblings('.Name').html();
    alert(idVal);
});

или 

 $('.edit').click(function() {
    var idVal = $(this).closest('tr').find('td:first').html();
    alert(idVal);
});

использование областей

 $('.edit').click(function() {
    var idVal = $('.Name', $(this).closest('tr')).html();
    alert(idVal);
});

и т.д…

Ответ №3:

Во-первых, есть довольно много небольших ошибок (в 7-м td отсутствует открывающий тег). Также идентификатор следует использовать только один раз, вы не можете / не должны иметь id=’name’ x3 или id=’family’ x3.

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

 $("#surname").html(); // where surname is the id

Ответ №4:

Пример для имени:

 $('input:button')
 .click(function(){alert($(this).closest('tr').find('td[id="Name"]').text());});

(Предполагается, что вы забыли некоторые строки внутри вашего кода)

Но поскольку идентификатор должен быть уникальным, вам лучше удалить идентификаторы и попробовать использовать индекс идентификаторов td:

 $('input:button')
 .click(function(){alert($(this).closest('tr').find('td:eq(1)').text());});

(Это позволит, например, найти 2-й <td> , чей идентификатор на самом деле является «фамилией»)