Javascript 为什么我不能将输入文本添加到表中？

我正在尝试将用户键入的文本添加到输入中，并将其添加到我的表中，就像使用一个按钮删除该项一样。这是我的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;
  });
});

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

---

感谢您的帮助。

看起来一切正常：

删除了onclick，只剩下jQuery处理程序。 把纽扣包起来。 更改按钮向按钮添加类型。 注1。Html表只能包含tr。tr可能仅包含td

附注2。使用submit时，请确保页面未重新加载

函数addProxy{ var proxyName=$'proxy-add-name'.val； var proxy=$'proxy-add-proxy'.val； $'proxy-list'。追加 ++代理名称+ ++代理+ +“x” +; } $function{ $'proxy-add'。单击函数{ 添加代理； 返回false； }; $'body'。在“单击”时，'。删除btn'，函数{ $this.parent.parent.remove； }; }; 名称-> 代理 Proxy1： 174.32.116.214:87 x 添加 $function{ 函数addProxy{ var proxyName=$'proxy-add-name'.val； var proxy=$'proxy-add-proxy'.val； var html=； html+=+proxyName+； html+=+proxy+； html+=； html+='x'； html+=； $'proxy-list-body'.appendhtml； } 函数resetProxyInputs{ $'proxy-add-name'.val； $'proxy-add-proxy'.val； } $'proxy-add'。单击，functionevent{ 添加代理； 重置代理输入； }; $'proxy-list'。单击，'。删除btn'，functionevnet{ var$removeButton=$this； $removeButton.最近的'tr'。删除； }; }; 代理列表{ 位置：绝对位置； 最高：15%； 左：60%； 边框：5px实心e83737； 边界塌陷：塌陷； } th{ 高度：50px； 边框：5px实心e83737； 文本对齐：居中； } th，td{ 颜色：4F8AFF； } 运输署{ 高度：180像素； 填充底部：140px； 左侧填充：20px； 右边填充：10px； 文本对齐：左对齐； } .删除btn{ 宽度：20px； 高度：20px； 背景色：4F8AFF； 边框：2px实心4F8AFF； 边界半径：10px； } 泰克斯{ 颜色：白色； 位置：相对位置； 顶部：-1.203px； 左：-0.8px； } 代理添加名称，代理添加代理{ 位置：相对位置； 顶部：245px； 左：60.5%； 身高：26.5px； 背景色：透明； 边框：2px实心e83737； 左边界：无； 边框底部：无； 颜色：4F8AFF； } 代理添加名称{ 宽度：90px； } 代理添加代理{ 宽度：157px； 边界权：无； 左：60%； } 代理添加{ 位置：绝对位置； 顶部：290px； 左：84.8%； 宽度：37px； 高度：26px； 背景色：e83737； 边框：2px实心e83737； 颜色：白色； } 代理 Proxy1： 174.32.116.214:87 x 添加

---

首先，您需要从按钮标记中删除事件处理程序，原因有两个：不要触发addProxy函数两次；其次，因为内联事件处理程序是非常糟糕的做法，我真的要求您避免使用它们

<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">Add</button>

对于单击处理程序：

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

$('body').on('click', 'button.remove-btn', function(){
    $('tr[data-id="'+$(this).data('target')+'"]')[0].remove();
    return false;
});

Ps:id变量必须是全局变量，例如等于0

对于删除过程，我将直接在单击处理程序中将其设置为匿名函数：

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

$('body').on('click', 'button.remove-btn', function(){
    $('tr[data-id="'+$(this).data('target')+'"]')[0].remove();
    return false;
});

---

Ps：这里我们必须使用.on方法，将事件附加到主体，并将第二个参数指定为button.remove-btn，因为我们正在处理动态添加的元素。

1。您不需要同时使用onclick和.click。我建议您使用。仅单击。2.可能不是问题，但仍然是：您添加按钮时没有将其包装在中，这意味着将其包装在中@AlexYokisamaCheck答案仍然不起作用我也会分享我的css@chebabyI不知道css样式与你的问题有什么关系！！不管怎样，有什么事情是它不能像你期望的那样工作的？！更具体地说，我在两个输入框中输入内容，然后按下“添加”按钮，但什么也没有发生，文本仍然保留在输入框中，我看不到它出现@chebaby@MaxymWojnowskyj好啊让我检查一下，然后再给你回复。它可能与整个代码或类似的东西有关，如果你不介意的话，我可以通过电子邮件将代码发送给你，你可以检查一下吗？我不想在stack@chebabyIt上给出我的全部代码，因为我的代码似乎没有明确的边框形状，所以如果我删除第一个表数据，边框就会消失，并且只在代理标签周围。无论如何，我可以通过电子邮件发送我的全部代码吗？当我尝试添加一些文本Electron Helper时，我在终端上得到了这个信息[50213:3833751]无法设置s 从默认值中选择TextBackgroundColor