javascript - 为什么我无法将输入文本添加到我的表格中？

Question

我正在尝试添加用户在输入中键入的文本，并将其添加到我的表格中，就像删除元素的按钮一样，这里是我的 html 代码:

<table id="proxy-list">
    <tr>
      <!--<th>Name</th> -->
      <th colspan="3">Proxies</th>
    </tr>
    <tr>
      <td>Proxy1:</td>
      <td>174.32.116.214:87</td>
      <td>
        <button class="remove-btn"><div class="thex">x</div></button>
      </td>
     </tr>
  </table>
  <input type="text" id="proxy-add-name" placeholder="Name"></input>
  <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
  <button type="submit" id="proxy-add" onclick="addProxy()">Add</button>

这是我试过的 javascript 代码，但它不起作用

function addProxy() {
    var proxyName = $('#proxy-add-name').val();
    var proxy = $('#proxy-add-proxy').val();
    $('#proxy-list').append('<tr>'
        +'<td>'+proxyName+'</td>'
        +'<td>'+proxy+'</td>'
        +'<button class="remove-btn"><div class="thex">x</div></button>'
        +'</tr>');
}

$(function(){
  $('#proxy-add').click(function(){
    addProxy();
    return false;
  });
});

知道为什么这不起作用吗？以及如何使用删除按钮添加文本，以便在我单击按钮时删除文本？

感谢任何帮助。

Answer 1

看起来一切正常:

1. 已删除 onclick ，只剩下 jQuery 处理程序。
2. 包装button在 <td> .
3. 已更改 button#proxy-add输入 button .

注意 1. Html 表格只能包含 tr's . tr可能只包含 td's

注意 2. 使用 submit确保该页面未重新加载。

function addProxy() {
    var proxyName = $('#proxy-add-name').val();
    var proxy = $('#proxy-add-proxy').val();
    $('#proxy-list').append('<tr>'
        +'<td>'+proxyName+'</td>'
        +'<td>'+proxy+'</td>'
        +'<td><button class="remove-btn"><div class="thex">x</div></button></td>'
        +'</tr>');
}

$(function(){
  $('#proxy-add').click(function(){
    addProxy();
    return false;
  });
  $('body').on('click', '.remove-btn', function(){
    $(this).parent().parent().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="proxy-list">
    <tr>
      <!--<th>Name</th> -->
      <th colspan="3">Proxies</th>
    </tr>
    <tr>
      <td>Proxy1:</td>
      <td>174.32.116.214:87</td>
      <td>
        <button class="remove-btn"><div class="thex">x</div></button>
      </td>
     </tr>
  </table>
  <input type="text" id="proxy-add-name" placeholder="Name"></input>
  <input type="text" id="proxy-add-proxy" placeholder="Proxy"></input>
  <button type="button" id="proxy-add">Add</button>