我试图添加用户输入到输入中的文本,并将其添加到我的表中,就像使用按钮将其删除一样,这是我的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处理程序。
button包裹在<td>中。
button#proxy-add类型更改为button


注意1. HTML表只能包含tr'str只能包含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>

10-07 19:42
查看更多