Как извлечь данные из <td> в том же <tr> и вывести данные во внешний div

0

У меня есть таблица данных, состоящая из 3 столбцов. В третьем столбце находится кнопка для клика, которая должна добавлять данные во внешний div с идентификатором routeList из первого p во втором столбце. Вот мой html. Кроме того, я добавил событие щелчка, чтобы изменить класс кнопки и изменить текст кнопки.

.html

<tr>
    <td class="col1"><img src="http://placehold.it/200x200" alt="..." class="img-responsive tableImage"></td>
    <td class="col2">
        <p class="address">
            <i class="fa fa-home fa-lg"></i> Address
        </p>
        <p>
            <i class="fa fa-calendar fa-lg"></i> Dates
        </p>
        <p>
            <i class="fa fa-map-marker fa-lg"></i> Distance
        </p>
    </td>
    <td class="col3">
        <button type="button" class="btn btn-sm routeAdd btn-success" data-toggle="addToRoute"><i class="fa fa-check"></i> Added</button>
    </td>
</tr>

.js

$('[data-toggle=addToRoute]').click(function() {
    if($(this).children().hasClass('fa-plus')) {
        $(this).removeClass('btn-custom').addClass('btn-success').empty().html('<i class="fa fa-check"></i> Added');
            } else {
        $(this).removeClass('btn-success').addClass('btn-custom').empty().html('<i class="fa fa-plus"></i> Add');
            }
        });

Я пытался добавить это в первый раздел оператора if

$(this).closest('p.address').appendTo('#routeList');

Я думаю, что мне не хватает чего-то простого. Также на обратной стороне инструкции else p следует удалить, если нажать кнопку. Я не правильно выбираю элемент. Или я нападаю на это совершенно неправильно.

  • 0
    полный HTML, пожалуйста, или, по крайней мере, ваш код для внешнего div, чтобы мы могли найти наиболее эффективный способ делать то, что вы хотите. у этого div уже есть содержимое? Вы хотите, чтобы данные были вставлены в определенное место внутри div?
  • 0
    По сути это просто пустой внешний div. В конце концов это будет еще одна таблица данных с двумя столбцами, одним из которых является p.address, и кнопкой для удаления этой строки в целом.
Теги:

1 ответ

1
Лучший ответ

Пытаться

$(this).closest('tr').find('p.address').appendTo('#routeList');

Найдите p.address в ближайшем tr.

.найти()

  • 0
    Да, это был вызов jquery, который я пропустил. На утверждение else, как я могу стереть это из нового div. Также я добавил .clone () перед appendTo (), чтобы исходные данные оставались на месте.
  • 0
    $('#routeList').empty(); удалить все содержимое или $('#routeList').find('p.address').remove();
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню