@bplmeddy

Как сгенерировать строки в таблице сайта?

Доброго времени суток.
Бьюсь над такой проблемой.
Есть страница личного кабинета на сайте.
На данной странице есть таблица со списком документов из 1С.
На текущий момент, при нажатии на название документа, сайт обращается к 1С, получает по номеру документа список товаров которые относятся к данному документу и возвращает значение обратно на сайт. Сайт в свою очередь перенаправляет пользователя на страницу где согласно полученным от 1С данным формируется таблица с товарами которые содержит документ.
Собственно, сам вопрос таков: как можно реализовать функционал, при котором после клика происходил не переход на отдельную страницу, а под документом на который кликнули разворачивались отдельные строки со списком товара.
Буду очень благодарен за помощь.
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
@bplmeddy Автор вопроса
Задачу решил следующим образом(UPDATE с рабочим удалением).

1) Сначала добавил идентификатор к необходимому элементу и на "+" повесил обращение к функции:
<tr id="<?= $order['id'] ?>">
<td class="cart_description">
    <p id="doc_link" data-id="<?= $order['1c_doc_id'] ?>" data-type="<?= $order['1c_doc_type_id'] ?>" ><i class="fa fa-plus" onClick="reply_click(this.parentNode.parentNode.parentNode.id)"></i> <?= $order['1c_doc_name'] ?></p>

</td>


Код формирующий таблицу целиком:

<table class="table table-condensed" id="docs">
<thead>
    <tr class="cart_menu">
        <td class="price">Документ</td>
        <td class="total">К-ть</td>
        <td class="total">Сумма документу</td>
        <td class="total">Зміна балансу</td>
    </tr>
</thead>
<tbody>
    <?php foreach($cos_ord as $order): ?>
        <tr id="<?= $order['id'] ?>">
            <td class="cart_description">
                <?php if($order['1c_doc_type_id'] == 1 || $order['1c_doc_type_id'] == 2): ?>
                    <p id="doc_<?= $order['id'] ?>"><i id="rem_<?= $order['id'] ?>" class="fa fa-plus" onClick="reply_click(this.parentNode.parentNode.parentNode.id, this.className)"></i> <?= $order['1c_doc_name'] ?></p>
                <?php else: ?>
                    <p id="doc_<?= $order['id'] ?>"> <?= $order['1c_doc_name'] ?></p>
                <?php endif;?>

            </td>
            <td class="cart_total" style="font-size: 18px; padding-top: 5px">
            </td>
            <td class="cart_total" style="font-size: 18px; padding-top: 5px">
                <p class="cart_total_price" style="font-size: 18px; padding-top: 5px"><?= $order['1c_doc_sum'] ?> $</p>
            </td>
            <td class="cart_total" style="font-size: 18px; padding-top: 5px">
                <?php if($order['costumer_balance'] == 0): ?>
                    <p class="cart_total_price" style="font-size: 18px; padding-top: 5px"> --- </p>
                <?php else: ?>    
                    <p class="cart_total_price" style="font-size: 18px; padding-top: 5px"><?= $order['costumer_balance'] ?> $</p>
                <?php endif; ?>
            </td>
        </tr>
    <?php endforeach; ?>
    <!-- TABLE FOOTER -->
    <tr>
        <table class="table table-condensed total-result">
            <tr class="shipping-cost">
                <td>Поточний баланс:</td>
                <td><?= $_SESSION['user']->balance ?> USD</td>                                      
            </tr>
            <tr>
                <td>Сумма замовлень з сайту:</td>
                <td><span><?= $total_sum ?> грн</span></td>
            </tr>
        </table>
    </tr>
</tbody>


2) Потом отредактировал сам скрипт(финальный вид):

function reply_click(row_id, el_class){
var id = row_id;
var parent_id = 'doc_'+row_id;
var rem_plus = 'rem_'+row_id;
var row_remove_id = row_id+'_rem';
var rem_minus = row_id+'_rem-';
if (el_class !== 'fa fa-minus'){
    $.ajax({
        url: '/costumer/items',
        data: {id:id},
        type: 'GET',
        dataType: 'xml',
        success: function(response) {
            $(response).find('response').each(function(){
                $(this).find('row').each(function(){
                    $(this).find("product").each(function(){
                        product = $(this).text();
                    });
                    $(this).find("qty").each(function(){
                        qty = $(this).text();
                    });
                    $(this).find("price").each(function(){
                        price = $(this).text();
                    });
                    $(this).find("summ").each(function(){
                        summ = $(this).text();    
                    }); 
                    $('#'+row_id).after('<tr class="'+row_remove_id+'"><td class="cart_description">' + product + '</td><td class="cart_total" style="font-size: 18px; padding-top: 5px">' + qty + '</td><td class="cart_total" style="font-size: 18px; padding-top: 5px">' + price + '</td><td class="cart_total" style="font-size: 18px; padding-top: 5px">' + summ + '</td></tr>');
                });
                $('#'+rem_plus).remove();
                $('#'+parent_id).prepend('<i id="'+rem_minus+'" class="fa fa-minus" onClick="reply_click(this.parentNode.parentNode.parentNode.id, this.className)"></i>');
            });
        }
    });
}else{
    $('.'+row_remove_id).remove();
    $('#'+rem_minus).remove();
    $('#'+parent_id).prepend('<i id="'+rem_plus+'" class="fa fa-plus" onClick="reply_click(this.parentNode.parentNode.parentNode.id, this.className)"></i>');
}


Столкнулся с проблемой: при попытке удалить сгенерированные строки таблицы (все строки относящиеся к конкретному документу имеют ID данного документа), удалялась только одна строка. Проблему удалось побороть посредством назначение не ID для строки а класса(почему то несколько элементов одного класса удалять можно за раз, а вот с ID такой номер не проходит).

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

Спасибо всем кто пытался помочь. Всем бобра ;)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Fzero0
@Fzero0
Вечный студент
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы