jquery - 添加信息到动态文本框 jQuery

Question

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

我一直在尝试做的是能够输入名称或任何文本，并在单击“立即添加”按钮时将其显示在“名称”框中。 我一直在尝试调整现有的添加功能以显示输入到第二个框中的文本，但无法弄清楚。

现场版在这里: http://codepen.io/BabinecJ/pen/BRjJbw

$('[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());
    }
  }
});

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

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

<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>

Answer 1

根据 id 的 MDN 文档:“id global attribute 定义了一个唯一标识符 (ID)，它在整个文档中必须是唯一的。“ ¹

因此，将目标元素(即 <p id="tname">)的 id 属性更新为唯一的。这个 block :

<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);

请看下面的演示:

$('[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());
    }
  }
});

.template {
  border-style: solid;
}

#cand_no {
  background-color: red;
}

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

<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>

---

¹ _{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}