Question

我使用Javascript创建了一个动态表。我希望用appendChild每行的单元格选择一个。

首先我在表创建完成后尝试在不同的populateTableCell函数中使用它。我认为代码可读性更好。但我不能成功。

这就是为什么我试图在同一个函数中填充它。但是，它只填充最后一行。

<table id="informationTable">
    <tr>
        <th>userID</th>
        <th>Status</th>
        <th>Profile</th>
    </tr>
</table>

这是我试过的JS ......

    function setAllUsers(users){
        //Create array of options to be added
        var array = ["Normal","Incident","Major Incident"];

        //Create select list
        var selectList = document.createElement("select");

        //Create and append the options
        for (var i = 0; i < array.length; i++) {
            var option = document.createElement("option");
            option.value = array[i];
            option.text = array[i];
            selectList.appendChild(option);
        }

        for(i = 0; i < users.length-1; i++){
            var table = document.getElementById('informationTable');
            var row = document.createElement("tr");
            row.id = users[i];  

            var cell0 = row.insertCell(0);
            var cell1 = row.insertCell(1);
            var cell2 = row.insertCell(2);

            cell0.innerHTML = users[i];
            cell0.value = users[i];

            cell1.id=users[i]+"-status";
            cell1.class="statusClass";

            cell2.id=users[i]+"-profile";
            cell2.class="profileClass";

            cell2.appendChild(selectList);

            table.appendChild(row);
        }
    }

我还尝试将createElement('select')，createElement('option')和select.appendChild(option)置于“for”循环中。但这个时间页永远不会加载。我发现了一个类似的帖子并尝试使用它。

How to dynamically insert a table row with a select box with options in a table using javascript?

但是这里的每一行都是由于按钮点击而附加的。

感谢您的回答。此致 ALP

Answer 1

少数事情：

添加新列而不是附加到配置文件单元格可能更有意义，因此您应该添加新的列标题并再次运行insertCell
您应该使用className，而不是class - class是Javascript中的保留字。
除非您的用户数组包含HTML，否则出于性能原因，您应使用textContent而不是innerHTML。
当您追加到单元格时，您需要运行selectList.cloneNode(true)，以便每次都获得该元素的新副本。
在循环的每次迭代中运行var table = document.getElementById('informationTable');是昂贵而毫无意义的，你只需要在函数的生命周期中获得一次这样的句柄 - 所以将它移到循环的顶部和外部

我没有users数组，但这是一个有效的示例，可以猜测数组的外观（可以随意替换let和const如果需要，可以使用var：

＆＃13;

const users = [
  ['1', 'Active', 'Bob'],
  ['2', 'Disabled', 'Alice']
];

function setAllUsers(users){
    //Create array of options to be added
    const priorities = ["Normal","Incident","Major Incident"];
	const table = document.getElementById('informationTable');
    //Create select list
    const selectList = document.createElement("select");

    //Create and append the options
    for (let i = 0; i < priorities.length; i++) {
        const option = document.createElement("option");
        option.value = priorities[i];
        option.text = priorities[i];
        selectList.appendChild(option);
    }

    for(let i = 0; i < users.length; i++){
        const row = document.createElement("tr");
        row.id = 'user-'+users[i][0];
        
        const cell0 = row.insertCell(0);
        const cell1 = row.insertCell(1);
        const cell2 = row.insertCell(2);
        const cell3 = row.insertCell(3);

        cell0.textContent = users[i][0];

        cell1.id = users[i][1]+"-status";
        cell1.className = "statusClass";
		cell1.textContent = users[i][1];
        
        cell2.id=users[i][2]+"-profile";
        cell2.className = "profileClass";
		cell2.textContent = users[i][2];

        cell3.appendChild(selectList.cloneNode(true));

        table.appendChild(row);
    }
}

setAllUsers(users)

＆＃13;

<table id="informationTable">
    <tr>
        <th>userID</th>
        <th>Status</th>
        <th>Profile</th>
        <th>Priority</th>
    </tr>
</table>

＆＃13;

使用动态选择填充动态表行

1 个答案: