将信息添加到动态文本框jQuery

Question

我一直在创建一个应用程序，根据您在一个文本框中键入的数字添加表格。我已经能够创建一个根据数字生成表格的按钮，然后一个框显示每次添加后的表格数量。

我一直试图做的就是能够输入姓名或任何文字，并将其显示在“姓名”中。点击＆＃39;立即添加＆＃39;按钮。 我一直试图调整现有的添加功能，以显示输入到第二个框中的文字，但无法弄清楚。

现场版： http://codepen.io/BabinecJ/pen/BRjJbw

＆＃13;

＆＃13;

$('[name="cand_no" ]').on('change', function() {
  // Not checking for Invalid input
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    ///Click add button add count number + table

    $(function() {
      $('#add').bind('click', function() {
        $('#mytbody');
        var count = $('#mytbody').children('tr').length;
        $('#counter').html(count);
        
        var name = $("#tname").val();
        $(name).after($("#tname"));
        $('#tname').html(name);
        ///need to find enter coder name 

        var name = $("#tname").val();
        $('#name').html(name);
      });
    });

    /// Figuring out way to disable enter key being pressed

    $(document).ready(function() {
      $('cand_no').keydown(function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });

    for (var i = 0; i < val; i++) {
      // Clone the Template
      var $cloned = $('.template tbody').clone();
      // For each number added append the template row
      $('#studentTable tbody').append($cloned.html());
    }
  }
});

＆＃13;

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

#add {
  color: red;
  margin-right: 770px;
  margin-top: -35px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label><strong>Number of Rows</strong></label>
  <label><input name="cand_no"  type="text" placeholder="Type Number of Rows" id="cand_no" /></label>
  <div class="clear"></div>
</p>
<button id="add" style="float:right;">Add row</button>

<p>
  <label><strong>Your Name</strong></label>
  <label><input name="tname" id="cand_no" type="text" placeholder="Type Your Name"  /></label>
  <span class="clear"></span>
</p>
<div class="cand_fields">
  <table id="studentTable" width="630" border="solid">
    <tbody id="mytbody">
      <tr>
        <td>
          <p>Number of rows:
            <span id="counter">
              </span>
            </p>
        </td>

        <td>Name
          <p id="tname">
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td><input name="tname" type="text" placeholder="name" required="required" id="tname" /></td>

        <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
      </tr>
  </table>
</div>

<div class="template" id=".template" style="display:none ">
  <table>

    <tr>
      <td><input name="cand_name" type="text" placeholder="Count" required="required" id="count" /></td>

      <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
    </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据 id 的MDN文档：＆＃34; id global attribute定义唯一标识符（ID），该标识符必须是唯一的整个文件。＆＃34; ¹

因此，将目标元素（即<p id="tname">）的 id 属性更新为唯一。这个块：

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="tname"></span></p></td>

变成这样：

<td> <p>Number of rows: <p id="counter"></span></p></td>

<td>Name<p id="aname"></span></p></td>

然后更新更新该元素的JavaScript代码：

 $('#aname').html(name);

见以下演示：

＆＃13;

＆＃13;

$('[name="cand_no" ]').on('change', function() {
  // Not checking for Invalid input
  if (this.value != '') {
    var val = parseInt(this.value, 10);
    ///Click add button add count number + table

    $(function() {
      $('#add').bind('click', function() {
        $('#mytbody');
        var count = $('#mytbody').children('tr').length;
        $('#counter').html(count);
        ///need to find enter coder name 
        var name = $("#tname").val();
        $('#aname').html(name);
      });
    });
    /// Figuring out way to disable enter key being pressed
    $(document).ready(function() {
      $('cand_no').keydown(function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
          return false;
        }
      });
    });
    for (var i = 0; i < val; i++) {
      // Clone the Template
      var $cloned = $('.template tbody').clone();
      // For each number added append the template row
      $('#studentTable tbody').append($cloned.html());
    }
  }
});

＆＃13;

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

#add {
  color: red;
  margin-right: 770px;
  margin-top: -35px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <label><strong>Number of Rows</strong></label>
  <label><input name="cand_no"  type="text" placeholder="Type Number of Rows" id="cand_no" /></label>

<div style="float: right; width: 40px">
    <button id="add">Add row</button>
</div>
  <div class="clear"></div>
</p>
<p>
  <label><strong>Your Name</strong></label>
  <label><input name="tname" id="tname" type="text" placeholder="Type Your Name"  /></label>
  <div class="clear"></div>
</p>


<div class="cand_fields">
  <table id="studentTable" width="630" border="solid">
    <tbody id="mytbody">
      <tr>
        <td>
          <p>Number of rows:
            <p id="counter">
              </span>
            </p>
        </td>

        <td id="tname" width="0">Nameee
          <p id="aname">
            </span>
          </p>
        </td>
      </tr>
      <tr>
        <td><input name="tname" type="text" placeholder="name" required="required" id="tname" /></td>

        <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
      </tr>
  </table>
</div>

<div class="template" id=".template" style="display:none ">
  <table>





    <tr>
      <td><input name="cand_name" type="text" placeholder="Count" required="required" id="count" /></td>

      <td><input name="cand_pos" type="text" placeholder="Name" required="required" /></td>
    </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

¹ <子> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id