如何解决jQuery/JS - 向每一行动态添加按钮以删除该特定行
我正在做一些家庭作业,但被卡住了。
我需要做的是创建一个表格,在表格中设置行数和列数,并添加用于删除创建的每一行的按钮。我设法创建了带有事件侦听器的按钮,但由于某种原因,第一个被点击的按钮将删除该行,然后其余按钮将根本无法工作。
(应该使用纯JS和jQuery,代码应该修复的部分我已经注释了)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
<form>
Broj Redaka <input type="text" name="red" id="redak"/><br>
Broj stupaca <input type="text" name="stupac" id="stupac"/><br>
<input type="button" value="KREIRAJ" id="tipka">
<div id="ispis"></div>
</form>
<script>
$(document).ready(function(){
$("#tipka").click(function(){
var tekst,tekstPretraga;
var i,j;
var redak=$("#redak").val();
var stupac=$("#stupac").val();
$("table").remove();
if(isNaN(redak) || isNaN(stupac) || redak=="" || stupac==""){
alert("Niste unijeli ispravan broj redaka i stupaca");
}
else{
$("#ispis").append("<table>");
for(i=0; i<redak; i++){
$("table").append("<tr id="+i+">");
for(j=0; j<=stupac; j++){
tekstPretraga="#"+i;
if(j!=stupac){
$(tekstPretraga).append("<td id="+i+""+j+">"+"i="+i+",j="+j+"</td>");
}
else{
//CODE FOR CREATING BUTTONS AND EVENT LISTENER SHOULD GO HERE!
$(tekstPretraga).append("<td><input type='button' value='DELETE' class='tipke' id='tipka"+i+"'></td>");
$(document).on("click","#tipka"+i,function(){
$(tekstPretraga).remove();
});
}
}
}
$("table,td,tr").css("border","1px solid black");
}
});
});
</script>
</body>
</html>
Before clicking the DELETE button
After clicking the DELETE button
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。