javascript - 如何在 jquery 中附加具有特定数字的表行

Question

我有一个表和一个 class = Add，它在单击时附加行，还有一个 class = number。

我的问题是如何将存储在具有类号的跨度中的数字附加到我的行中？

这是我的代码片段:

$(document).ready(function () {
  $(".add").click(function () {
    $('#mytable tr:last').after('<tr><td class="tr1" style="max-width: 10px;">Hello</td></tr>');
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
You can add <span class="number"> 3</span> Hosts 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>

Answer 1

试试看

$(document).ready(function () {
  var i = 0;
  var num = parseInt($('.number').text(), 10); 
  $(".add").click(function () {
    if(i < num) {
        $('#mytable tr:last').after('<tr><td class="tr1" style="max-width: 10px;">Hello</td></tr>');
       i++;
      }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
Yo Can add <span class="number"> 3</span> Host 
<table id="mytable" border="1">
   <tr>
      <td>1</td>
      <td>Title</td>
      <td>price</td>
   </tr>
   <tr>
      <td>1</td>
      <td>Title </td>
      <td>price</td>
    </tr>
</table>
<span  class="add" data-tooltip="You can add 3 host"><font color="red">add+</font></span>