javascript - 使用 javascript/jquery 向表中添加新行

Question

我想在单击“添加”按钮时向表中添加行，并使用 javascript/jquery 使用“删除”按钮删除行。我尝试编写以下代码:

<script src="/js/jquery-2.0.3.js"></script>
  <script>
    /* Javascript for phone numbers*/
    $(document).ready(function()
    { 
      var counter = 2;
      var count= 4;

      $("#add_phone").click(function() 
      {
        alert("whoah it worked");
        if(counter>=count)
        {
          alert("Only " + count + " Phone number allowed.");
          return false;
        }   

        var htmlToAppend = '<tr id="pn'+ counter +'"><th>
              <select class="phone_no">
                <option value="home">home</option>
                <option value="Business">Business</option>
                <option value="Business2">Business 2</option>
              </select>
            </th>
            <td><input type="text"/></td></tr>';
            $("#phone_number").append ( htmlToAppend );

        newTableRow.appendTo("#phone_number");
        counter++;
      });

      $("#delete_phone").click(function() 
      {
        if(counter==2)
        {
          alert("Cannot remove phone number");
          return false;
        }   
        counter--;

        $("#pn" + counter-1).remove();

      });
    });

但是警告消息 alert("whoah it worked"); 没有显示，即它没有进入函数。

<div class="info_type">
        Phone numbers  <hr>
        <table id="phone_number">
          <tr id="pn1">
            <th>
              <select class="phone_no">
                <option value="home">home</option>
                <option value="Business">Business</option>
                <option value="Business2">Business 2</option>
              </select>
            </th>
            <td><input type="text"/></td>
          </tr>  
        </table>
        <input type="button" id="add_phone" value="Add"/>
        <input type="button" id="delete_phone" value="Delete"/>  
      </div>

我真的很想要这个解决方案。谁能帮帮我？？

PS: 我在 Rails 上使用 Ruby

Answer 1

您的字符串追加格式不正确。

 var htmlToAppend = '<tr id="pn'+ counter +'"><th><select class="phone_no"> <option value="home">home</option> <option value="Business">Business</option> <option value="Business2">Business 2</option></select> </th><td><input type="text"/></td></tr>';

fiddle 中的工作样本 http://jsfiddle.net/shree/jNA4x/