javascript - 无法删除带有索引的表内的 tr 元素

问题描述

我正在尝试创建一个表格，在其中输入来自对象的元素。可以在页面上呈现的元素数量有限。因此，为了查看更多内容，您将单击下一个/上一个，以查看其他“页面”。

问题是，我想删除不显示的索引。

底部的逻辑是我设置最小和最大索引并查看不同的页面，我会将这些数字增加 10（以在页面上获得 10 个结果）但是当我单击下一步按钮时，我想删除 0 - 10 和只有 10 - 20，但 table.deleteRow(index) 什么都不做。（但 table.deteteRow(1) 确实有效）

function fill(){
        prices.forEach((element,index) =>{
            const table = document.querySelector("table");
            const tr = document.createElement("tr");
            tableItems.appendChild(tr);
            
           
            if(index >= min && 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();
    });

标签： javascripthtml

javascript - 无法删除带有索引的表内的 tr 元素

问题描述

解决方案

推荐阅读