Блог

Главная - Вопросы по программированию - Не удается удалить элементы tr внутри таблицы с индексом

Не удается удалить элементы tr внутри таблицы с индексом

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь создать таблицу, в которую я ввожу элементы из объекта. Существует ограниченное количество элементов, которые могут отображаться на странице. Итак, чтобы увидеть больше, вы нажмете на next / previous, чтобы увидеть другую «страницу».

Проблема в том, что я хочу удалить индексы, которые не должны отображаться.

Логика внизу заключается в том, что я устанавливаю минимальный и максимальный индекс и, чтобы увидеть другую страницу, я увеличу эти числа на 10 (чтобы получить 10 результатов на странице), но когда я нажимаю на кнопку далее, я хочу удалить 0-10 и иметь только 10-20, но таблица.deleteRow(index) ничего не делает. (но таблица.deteteRow(1) работает)

 function fill(){
        prices.forEach((element,index) =>{
            const table = document.querySelector("table");
            const tr = document.createElement("tr");
            tableItems.appendChild(tr);
            
           
            if(index >= min amp;amp; index < max){
                
                const type = document.createElement("td");
                const name = document.createElement("td");
                const hours = document.createElement("td");
                const photos = document.createElement("td");
                const place = document.createElement("td");
                const price = document.createElement("td");

                type.innerHTML = element.type;
                name.innerHTML = element.name;
                hours.innerHTML = element.hours;
                photos.innerHTML = element.photos;
                place.innerHTML = element.place;
                price.innerHTML = element.price;

                tr.appendChild(type);
                tr.appendChild(name);
                tr.appendChild(hours);
                tr.appendChild(photos);
                tr.appendChild(place);
                tr.appendChild(price);
            }

            if(index > max){
                table.deleteRow(index);
            }
    
            //
        });
    }


    buttonRight.addEventListener("click",()=>{
        min = max;
        max = max   10;

        fill();
    });
    buttonLeft.addEventListener("click",()=>{
        max = min;
        min = min -10;

        fill();
    });

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

1. Используйте removeChild()

2. У меня большие проблемы при использовании removeChild. Он всегда выдает ошибки, поэтому я хотел вместо этого использовать deleteRow()

3. Действительно ли здесь необходимо выполнять манипуляции с dom? Кажется, это может быть достигнуто с помощью css и нескольких классов (назначенных / удаленных с помощью javascript).

4. Ну, я подумал об этом, что я бы назначил те, которые должны отображаться с помощью active class, а остальные будут display: none, но я не сталкивался с удалением элементов с помощью JS, и я воспринял это как практику.

Ответ №1:

Вы всегда должны удалять строки с индексом 0-9 и не должны изменять номер индекса, потому что в вашей таблице всегда есть 10 строк. Кажется, что когда вы нажимаете кнопку Next, простой способ — удалить все tr из таблицы перед вызовом функции fill .

Метки: