使用JavaScript插入输入标签的新行

问题描述

我想向<td>元素追加5行输入标记的新行，该元素是<tr class="unit">的子元素，也是<table id="myTable">元素的孙子元素.

I would like to append a new row of 5 input tags to the <td> element, which is a child of <tr class="unit">, and which is a grandchild of <table id="myTable"> element.

在我的Javascript代码中，我能够控制台记录5个输入标签，但无法将它们附加到<td>元素和其余的父元素中.

In my Javascript code, I was able to console-log the 5 input tags, but was not able to append them to the <td> element and to the rest of the parent elements.

我的代码是否在解决此问题的正确道路上?

Is my code on the right track for solving this?

这里是我正在做的事情的链接 http://codepen.io/johnnyginbound/pen/xZxZNo?editors = 101

Here's a link to the what I'm doing http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101

function addRow(){
  var parentTable = document.getElementById('myTable');
  var tableRow = document.getElementsByTagName('tr')[0].children;
  var unitTables = document.getElementsByClassName('unit-table')[0];
  var newInputType = document.createElement('input');
  newInputType.setAttribute('type', 'text');

  for(var i=0; i<unitTables.children.length; i++){
    var appendedInput = unitTables.children[i].appendChild(newInputType)
    parentTable.appendChild(appendedInput);
  }
}

document.getElementById('add_btn').onclick=addRow;

<form>

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
      <p> ASME Email: </p>
      <input type="text" name="email">
      <br />
      <br />

    </div>

    <!-- Table -->
    <table id="myTable" class="table">
      <tr>
        <th> Technology </th>
        <th> Markets </th>
        <th> Enduring/Emerging </th>
        <th> ASME Relevency </th>
        <th> Comments </th>
      </tr>

      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
    </table>
  </div>

  <button id="add_btn">Add new row</button>
  <input type="submit" name="submit" value="Submit">
</form>

推荐答案

您的问题是表单标记，该标记在每个按钮事件中都会刷新您的Web.另外，您的JavaScript代码也有几个问题.

Your problem is the form tag which refresh your Web in each button event. Also your JavaScript code have several problems.

所以您的代码应该是

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
      <p> ASME Email: </p>
      <input type="text" name="email">
      <br />
      <br />

    </div>

    <!-- Table -->
    <table id="myTable" class="table">
      <tr>
        <th> Technology </th>
        <th> Markets </th>
        <th> Enduring/Emerging </th>
        <th> ASME Relevency </th>
        <th> Comments </th>
      </tr>

      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
      <tr class="unit-table">
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
        <td>
          <input type="text">
        </td>
      </tr>
    </table>
  </div>

JavaScript

JavaScript

function addRow(){
  var parentTable = document.getElementById('myTable');
  var myTd,myInput;
  var myTr = document.createElement('tr');
  myTr.setAttribute('class','unit-table');
  for (var i=0; i<5;i++){
    myTd = document.createElement('td');
    myInput = document.createElement('input');
    myInput.setAttribute('type','text');
    myTd.appendChild(myInput);
    myTr.appendChild(myTd);
  }
  parentTable.appendChild(myTr);
}
document.getElementById('add_btn').onclick=addRow;

这篇关于使用JavaScript插入输入标签的新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！