Question

所以我正在编写一个js脚本来创建表并用数据填充它。我想限制显示的数据，并决定在将其插入dom后删除每个数组条目。

问题在于，拼接和移位方法会删除第二个元素，而我不明白为什么。

这是主要负责功能。

// ADD JSON DATA TO THE TABLE AS ROWS.
const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
        myBooks.splice(0, 1);
    }
};
loadData();

我得到的结果：

index   guid    isActive    balance age eyeColor    name    gender  company email
0   72bb2d7f-75f8-4cba-bb0e-0a0bab3a1fa2    true    $3,952.70   21  blue    Mckenzie Conway male    ENAUT   mckenzieconway@enaut.com
2   d0f4e37b-afbe-4970-b303-ba50cfaa02a0    false   $2,198.67   31  green   Susie Peters    female  JIMBIES susiepeters@jimbies.com
4   99d5ad37-44be-41a4-be57-dcb000fab1e3    false   $3,939.64   29  brown   Castillo Carney male    VORATAK castillocarney@voratak.com
6   5bae2fde-3c2f-4e82-8e96-7436022fd08a    true    $3,284.90   23  brown   Fran Bridges    female  NETERIA franbridges@neteria.com
8   a58bb110-4945-46b7-9d10-511ed79b4950    false   $3,612.44   32  green   Lambert Cobb    male    XOGGLE  lambertcobb@xoggle.com
10  8d0b1059-dabc-4e4c-8edf-a829370ed734    false   $2,702.12   30  brown   Ilene Waller    female  GOLOGY  ilenewaller@gology.com
12  1405dacd-57f6-49ad-9b13-49c2992e4bf5    false   $1,266.03   27  brown   Delacruz Talley male    XINWARE delacruztalley@xinware.com
14  a720a721-321a-4502-97b7-c44df194e977    true    $3,953.08   36  blue    Esmeralda Cabrera   female  TOURMANIA   esmeraldacabrera@tourmania.com
16  a9a8ab4b-9d2a-489e-bf1b-c6f9df61c3db    false   $2,725.77   28  blue    Annette Atkins  female  QUALITEX    annetteatkins@qualitex.com
18  a88bec10-0758-4c89-9905-109e8e64ffb8    true    $2,517.34   39  blue    Mandy Taylor    female  COMBOGEN    mandytaylor@combogen.com
20  fe01ae07-e730-49dc-9ab8-1dc7e3a1526a    false   $2,043.76   29  green   Luisa Schwartz  female  DOGTOWN luisaschwartz@dogtown.com

我期望的结果：

index   guid    isActive    balance age eyeColor    name    gender  company email
0   72bb2d7f-75f8-4cba-bb0e-0a0bab3a1fa2    true    $3,952.70   21  blue    Mckenzie Conway male    ENAUT   mckenzieconway@enaut.com
1   5a93ace9-650b-44b7-ae3b-69eb4362f6f1    true    $1,557.97   24  blue    Sasha Lang  female  EARTHPLEX   sashalang@earthplex.com
2   d0f4e37b-afbe-4970-b303-ba50cfaa02a0    false   $2,198.67   31  green   Susie Peters    female  JIMBIES susiepeters@jimbies.com
3   63bc0cbc-a7b3-4109-a0ad-8e50b5c3d242    false   $3,065.41   25  blue    Chang Franco    male    TRASOLA changfranco@trasola.com
4   99d5ad37-44be-41a4-be57-dcb000fab1e3    false   $3,939.64   29  brown   Castillo Carney male    VORATAK castillocarney@voratak.com
5   47854f72-3867-417f-84b5-b7052ab76a15    false   $3,604.89   29  blue    Ewing Wood  male    VIXO    ewingwood@vixo.com
6   5bae2fde-3c2f-4e82-8e96-7436022fd08a    true    $3,284.90   23  brown   Fran Bridges    female  NETERIA franbridges@neteria.com
7   b33db55d-a093-4002-ab81-c9d99e27a92e    true    $1,551.63   26  brown   Lacy Gallagher  female  OHMNET  lacygallagher@ohmnet.com
8   a58bb110-4945-46b7-9d10-511ed79b4950    false   $3,612.44   32  green   Lambert Cobb    male    XOGGLE  lambertcobb@xoggle.com
9   99cfc79b-0795-4d07-862e-7405b5ffcf53    true    $3,388.09   27  green   Kaye Valencia   female  ZILLATIDE   kayevalencia@zillatide.com
10  8d0b1059-dabc-4e4c-8edf-a829370ed734    false   $2,702.12   30  brown   Ilene Waller    female  GOLOGY  ilenewaller@gology.com

Answer 1

更改tabCell.innerHTML = myBooks[i][col[j]];

到

tabCell.innerHTML = myBooks[0][col[j]];

splice会删除您的第一个元素，因此您始终想获取“当前”的第一个元素。

Answer 2

所以@tymeJV给我一个主意之后，我稍微打开了一下功能，现在它可以正常工作了：）

const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }
    myBooks.splice(0, 20);
};
loadData();

Answer 3

您正在更改每次迭代时循环的数组。为防止出现问题，您可以：

向后循环，然后从阵列中删除项目时，您仍然可以处理下一个项目，并且该项目就位。
拼接后从柜台i移开，这样您将拥有i--，这将确保您留在第一行。
在循环后删除项目。

祝你好运

Answer 4

尝试以下操作：由于每次通过后都将删除数组的第一项，因此始终需要使用数组myBooks[0][col[j]]

中的第一项

要删除数组的第一项，可以使用.shift()方法。

// ADD JSON DATA TO THE TABLE AS ROWS.
const loadData = function() {
    for (let i = 0; i < 20; i++) {
        tr = table.insertRow(-1);

        for (let j = 0; j < col.length; j++) {
            const tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[0][col[j]];
        }
        myBooks.shift();
    }
};
loadData();

不知何故，我的数据的第二个元素都会被删除（我需要循环删除每个元素）

4 个答案: