如何将所有数组值按顺序放置到一列文本字段中？

Question

嗯，我有一个 table 由行和列组成，其中一列由所有文本字段组成，如果还有一个数组有值，这些值如何放在所有此列的文本字段顺序？

const row = document.querySelectorAll("tr");
let numberOfColumns;
const marks = [2, 5, 7, 6, 4, 9]
row.forEach(( item ) => {
    const columnsOfInput = item.querySelectorAll(["td > input"]);
    numberOfColumns = columnsOfInput.length
    for (let i = 0; i < columnsOfInput.length; i++) {
        for (let mark in marks) {
            columnsOfInput[ 0 ].value = mark.slice()
/*
All fields will be filled with number 5, meaning the array length, but this is not the goal!
How to place all values of "marks" array to all fields in order 2, 5, 7, 6, 4, 9 ?
*/
        }
    }
});
console.log(`number of columns: ${numberOfColumns}`); //  all columns that has text fields

<body>
<table style="width:50%; text-align: center">

<tr>
    <th>Mark1</th>
    <th>Mark2</th>
    <th>Total</th>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>
<tr>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td></td>
</tr>


</table>

   
</body>

Answer 1

您可以尝试做类似的事情：

const row = document.querySelectorAll("tr");
let numberOfColumns, marksIndex = -1;
const marks = [2, 5, 7, 6, 4, 9]

row.forEach(( item) => {    
    const columnsOfInput = item.querySelectorAll(["td > input"]);
    numberOfColumns = columnsOfInput.length;

    for (let i = 0; i < columnsOfInput.length; i++) { 
        for(let mark in marks){
            columnsOfInput[i].value = marks[marksIndex];     
        }   
    }

    marksIndex++;
});

这应该得到您在 HTML 中编码的 5 行，并且在 Mark1 和 Mark2 中的值为 2，然后在 Mark1 和 Mark2 中的值为 5，等等...

如果这不是您想要的，请告诉我，我会再次尝试提供帮助。

如何将所有数组值按顺序放置到一列文本字段中？

How to place all array values to a column of text fields in order?

javascript

arrays

input

html-table

fill