我试图添加用户输入到输入中的文本,并将其添加到我的表中,就像使用按钮将其删除一样,这是我的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'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>