Question

我希望当任何人单击“添加值”时，表行都应使用textarea值创建（请参阅图像以获取更多信息！）。我面临将做for循环的问题，我希望所有for循环条件都应同时执行。请告诉我如何同时执行所有for循环条件。

[图片] [1]

[JsFiddle] [2]

代码：

<div dir="ltr" style="text-align: left;" trbidi="on">
   <html>
      <head>
         <style>
            table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            }
            th, td {
            padding: 15px;
            text-align: left;
            }
         </style>
      </head>
      <body>
         <center>
            <textarea cols="50" id="input1" rows="10">
              1
              2
              3
              4
              5
            </textarea>
            <br />
            <textarea cols="50" id="input2" rows="10">
              1
              2
              3
              4
              5
            </textarea>
            <br />
            <textarea cols="50" id="input3" rows="10">
              1
              2
              3
              4
              5
            </textarea>
            <br />
            <textarea cols="50" id="input4" rows="10">
              1
              2
              3
              4
              5
            </textarea>
            <br />
            <textarea cols="50" id="input2" rows="10">
              1
              2
              3
              4
              5
            </textarea>
            <br />
            <button onclick="myFunction()">Add Values</button><br /><br />
            <table id="myTable">
               <tr>
                  <th>Sr No</th>
                  <th>Contact</th>
                  <th>Country</th>
                  <th>Sr No</th>
                  <th>Sr No</th>
               </tr>
            </table>
            <br>
            <button id="btnCopy">
            Copy Table!</button><br>
         </center>
      </body>
      <script>
         function myFunction() {
         
           const values1 = document.querySelector('#input1')
           .value.trim().split('\n');
           
           const values2 = document.querySelector('#input2')
           .value.trim().split('\n');
           
           const values3 = document.querySelector('#input3')
           .value.trim().split('\n');
           
             const values4 = document.querySelector('#input4')
           .value.trim().split('\n');
           
             const values5 = document.querySelector('#input5')
           .value.trim().split('\n');
           
           const table = document.querySelector('#myTable');
           
           for (const value1 of values1 && const value2 of values2 && const value3 of values3 && const value4 of values4 && const value5 of values5)
             table.innerHTML += `
         <tr><th>${value1}</th><td><b>${value2}</b></td><td>${value3}</td><td>${value4}</td><td>${value5}</td></tr>
         `;  
             
           
         }
         
      </script>
   </html>
</div>

Answer 1

听起来您正在尝试访问并行数组。在这种情况下，您需要传统的for循环而不是for-of循环：

const len = Math.max(values1.length, values2.length, values3.length, values4.length, values5.length);
for (let i = 0; i < len; ++i) {
    table.innerHTML += `
<tr><th>${values1[i]}</th><td><b>${values2[i]}</b></td><td>${values3[i]}</td><td>${values4[i]}</td><td>${values5[i]}</td></tr>
`; 
}

如果一个或多个数组的长度不如最长的数组长，则您可能希望|| ""使用""而不是undefined：

const len = Math.max(values1.length, values2.length, values3.length, values4.length, values5.length);
for (let i = 0; i < len; ++i) {
    table.innerHTML += `
<tr><th>${values1[i] || ""}</th><td><b>${values2[i] || ""}</b></td><td>${values3[i] || ""}</td><td>${values4[i] || ""}</td><td>${values5[i] || ""}</td></tr>
`; 
}

尽管查看该字符串，但我认为我可能会以不同的方式执行该功能：

function myFunction() {
    const allValues = [
        document.querySelector('#input1').value.trim().split('\n'),
        document.querySelector('#input2').value.trim().split('\n'),
        document.querySelector('#input3').value.trim().split('\n'),
        document.querySelector('#input4').value.trim().split('\n'),
        document.querySelector('#input5').value.trim().split('\n'),
    ];
    const table = document.querySelector('#myTable');
    const len = Math.max(...allValues.map(values => values.length));
    let html = "";
    for (const values of allValues) {
        // Fill in any blanks
        values.fill("", values.length, len);
        // Add this row
        html += "<tr>" + values.map((v, index) => {
            const tag = index === 0 ? "th" : "td";
            return `<${tag}>${v}</${tag}>`;
        }).join("") + "</tr>";
    }
    // Append to the table (all at once)
    table.insertAdjacentHTML("beforeend", html);
}

将+=与innerHTML一起使用通常是不明智的做法。当您执行此操作时，浏览器必须遍历现有的DOM结构，以构建一串HTML来传递给您的JavaScript代码，然后取回您的JavaScript代码所提供的内容，拆除DOM结构的完整内容，然后替换它带有通过解析新字符串创建的新元素。

如何在JavaScript中同时执行多个for循环

1 个答案: