在表格中添加表单输入

Question

我被卡住了。我想把我的输入从我的添加任务表格上传到我的表的新行，我们通过按下添加任务按钮创建。)

function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell3.innerHTML = "NEW CELL3";
    cell4.innerHTML = "NEW CELL4";
    cell5.innerHTML = "NEW CELL5";
      cell5.innerHTML =   '<button class="button-add" type="button" onClick="deleteRow()" >'
      +  'delete</button>';
    }

 <table id="myTable">
            <thead>
              <tr>
                <th>id</th>
                <th>titel</th>
                <th>beschrijving</th>
                <th>deadline</th>
                <th>delete task</th>
              </tr>
             </thead>
             <tbody>
               <tr>
                 <td>1</td>
                 <td><a href="detail.html">javascript</a></td>
                 <td>visuele aspecten</td>
                 <td>14-04-2020</td>
                 <td><input type="submit" value="delete"  onclick="deleteRow()"></td>
               </tr>
               <tr>
                 <td>2</td>
                 <td><a href="detail.html">html</a></td>
                 <td>layout maken</td>
                 <td>14-04-2020</td>
                 <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
               <tr>
                 <td>3</td>
                 <td><a href="detail.html">css</a></td>
                 <td>styling</td>
                 <td>14-04-2020</td>
                 <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
               <tr>
                   <td>4</td>
                   <td><a href="detail.html">php</a></td>
                   <td>backend werkend krijgen</td>
                   <td>14-04-2020</td>
                   <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
            </tbody>
          </table>  
 
 
 <form >
            <h2>Add Tasks</h2> 
            titel: <input type="text" name="titel"><br />
            beschrijving: <input type="text" name="beschrijving"><br />
            deadline: <input type="date" name="deadline"><br />
            <!-- <input type="submit" value="Add" name="type" class="center" onclick="myFunction()"> -->
            <button type="button" value="Add" id="handler" class="center button-add" onclick="addRow();">Try it</button>
            </form> 

Answer 1

使用document.querySelector从输入中获取数据，如document.querySelector('[name="titel"]').value。

function addRow() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = document.querySelector('[name="titel"]').value;
    cell3.innerHTML = document.querySelector('[name="beschrijving"]').value;
    cell4.innerHTML = document.querySelector('[name="deadline"]').value;
    cell5.innerHTML = "NEW CELL5";
      cell5.innerHTML =   '<button class="button-add" type="button" onClick="deleteRow()" >'
      +  'delete</button>';
    }

 <table id="myTable">
            <thead>
              <tr>
                <th>id</th>
                <th>titel</th>
                <th>beschrijving</th>
                <th>deadline</th>
                <th>delete task</th>
              </tr>
             </thead>
             <tbody>
               <tr>
                 <td>1</td>
                 <td><a href="detail.html">javascript</a></td>
                 <td>visuele aspecten</td>
                 <td>14-04-2020</td>
                 <td><input type="submit" value="delete"  onclick="deleteRow()"></td>
               </tr>
               <tr>
                 <td>2</td>
                 <td><a href="detail.html">html</a></td>
                 <td>layout maken</td>
                 <td>14-04-2020</td>
                 <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
               <tr>
                 <td>3</td>
                 <td><a href="detail.html">css</a></td>
                 <td>styling</td>
                 <td>14-04-2020</td>
                 <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
               <tr>
                   <td>4</td>
                   <td><a href="detail.html">php</a></td>
                   <td>backend werkend krijgen</td>
                   <td>14-04-2020</td>
                   <td class="button-1"><input type="submit" value="delete" onclick="deleteRow()"></td>
               </tr>
            </tbody>
          </table>  
 
 
 <form >
            <h2>Add Tasks</h2> 
            titel: <input type="text" name="titel"><br />
            beschrijving: <input type="text" name="beschrijving"><br />
            deadline: <input type="date" name="deadline"><br />
            <!-- <input type="submit" value="Add" name="type" class="center" onclick="myFunction()"> -->
            <button type="button" value="Add" id="handler" class="center button-add" onclick="addRow();">Try it</button>
            </form>