2016-07-25 150 views
3

我想创建使用JQuery,当一个按钮被点击添加和删除行的动态表。JQuery的删除()无法正常工作

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     var i = 2; 
 
     $("#btn1").click(function() { 
 
     $("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>"); 
 
     }); 
 

 
     $("#btn2").click(function() { 
 
     if (i > 2) { 
 
      $("#r" + i).remove(); 
 
      i--; 
 
     } else { 
 
      alert("Row Cannot Be Deleted !"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <table border="1"> 
 
     <tr> 
 
     <td>1</1> 
 
      <td>2</td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
    <button id="btn1">Add Item</button> 
 
    <button id="btn2">Delete Item</button> 
 

 
</body> 
 

 
</html>

删除按钮第一次单击似乎没有正常工作。 只有计数器“i”减1,但没有行被删除。 因此,添加项目时,“#”将始终与前面的项目相同。我无法弄清楚为了得到这样的结果我做了什么错误。

+0

尝试使用''.on('click',function(){// something}'' – Tauras

回答

1

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     var i = 1; 
 
     $("#btn1").click(function() { 
 
     i++; 
 
     $("table").append("<tr id='r" + i + "' ><td>" + i +"<td><input type='text' /></td></tr>"); 
 
     }); 
 

 

 
     $("#btn2").click(function() { 
 
     if (i > 2) { 
 
      $("#r" + i).remove(); 
 
      i--; 
 
     } else { 
 
      alert("Row Cannot Be Deleted !"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <table border="1"> 
 
     <tr> 
 
     <td>1</1> 
 
      <td>2</td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
    <button id="btn1">Add Item</button> 
 
    <button id="btn2">Delete Item</button> 
 

 
</body> 
 

 
</html>

0

的问题是这一行$("#r" + i).remove();

您需要将其更改为(i-1)

$("#btn2").click(function() { 
     console.log(i) 
     if (i > 2) { 
      $("#r" + (i-1)).remove(); // changed here 
      i--; 
     } else { 
      alert("Row Cannot Be Deleted !"); 
     } 
     }); 
    }); 

JSFIDDLE

+0

如果(i> 2)必须是if(i> = 2)匹配从第一次删除 – MoustafaS

+0

我试图替换e我的你的建议,但是,它似乎并没有工作 –

+0

我附加了一个jsfiddle检查 – brk

0

我想,下面的代码可能会在提供结构的清洁版本。 如果你的按钮是同一行的一部分,您可以通过调用该方法,并把该行的方法

JS功能删除该行做

function deleteRow(row) 
{ 
    var i=row.parentNode.parentNode.rowIndex; 
    document.getElementById('Yourtable').deleteRow(i); 
} 

调用功能

这是您动态创建删除按钮的地方nd表格本身

deletebtn.onclick = function() { 
     deleteRow(this); 
    }; 
0

只是递减我迟早:

$("#btn2").click(function() { 
    if (i > 2) { 
     i--; 
     $("#r" + i).remove(); 
    } else { 
     alert("Row Cannot Be Deleted !"); 
    } 
    }); 
0

insitaily试图删除已alreay递增我+++

<td>" + i+++"<td> 

所以它提高了我的值,而试图显然删除ID不会在那里,为什么这个问题你可以尝试这样

$("#r" + (i-1)).remove(); 

做参考https://plnkr.co/edit/IxnGt0PVMoXiS5lj6g0Q?p=preview

1

您需要进行一些修改代码。而不是保持变量i跟踪最新的行ID,您应该将计算基于当前表中的行数。这比使用变量跟踪它更可靠和灵活。如果你点击它第一

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $("#btn1").click(function() { 
 
     var i = $("#mytable tr").length + 1; 
 
     $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>"); 
 
     }); 
 

 
     $("#btn2").click(function() { 
 
     var i = $("#mytable tr").length; 
 
     if (i > 1) { 
 
      $("#r" + i).remove(); 
 
     } else { 
 
      alert("Row Cannot Be Deleted !"); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form> 
 
    <table id="mytable" border="1"> 
 
     <tr> 
 
     <td>1</1> 
 
      <td>2</td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
    <button id="btn1">Add Item</button> 
 
    <button id="btn2">Delete Item</button> 
 

 
</body> 
 

 
</html>

+0

我只是新的HTML和JQuery的世界。我会考虑下一次这样做。 感谢您的帮助 –

+0

@SaharAlsadah好的。此解决方案是否适合您? –

+0

是的,它是完美的工作,谢谢 –

0

例子,可以帮助

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     $("#btn1").click(function() { 
     var next = $('table tr').length + 1; 
     $("table").append("<tr id='r" + next + "' ><td>"+ next +"<td><input type='text' /></td></tr>"); 
     }); 

     $("#btn2").click(function() { 
      $("table tr:last()").remove(); 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <form> 
    <table border="1"> 
     <tr> 
     <td>1</1> 
     <td><input type="text"/></td> 
     </tr> 
    </table> 
    </form> 
    <button id="btn1">Add Item</button> 
    <button id="btn2">Delete Item</button> 

</body> 

</html> 
0
<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 
    $(document).ready(function() { 
     var i = 2; 
     $("#btn1").click(function() { 
     $("table").append("<tr id='r" + i + "' ><td>" + i+++"<td><input type='text' /></td></tr>"); 
     }); 

     $("#btn2").click(function() { 
     if (i > 2) { 
      $("#r" + (i-1)).remove(); 
      i--; 
     } else { 
      alert("Row Cannot Be Deleted !"); 
     } 
     }); 
    }); 
    </script> 
</head> 

<body> 
    <form> 
    <table border="1"> 
     <tr> 
     <td>1</1> 
      <td>2</td> 
     </tr> 
    </table> 
    </form> 
    <button id="btn1">Add Item</button> 
    <button id="btn2">Delete Item</button> 

</body> 

</html> 
1

删除按钮的工作原理。你所遇到的问题是正确地跟踪i变量的状态,这就是为什么这种模式比其价值更痛苦的原因。

从代码的外观来看,您只需确保表中至少有一行。如果是这样,你可以查看当前在表tr元素的数量上的删除按钮的点击,这样的:

$(document).ready(function() { 
 
    $("#btn1").click(function() { 
 
    var $tr = $('table tr'); 
 
    $tr.last().after("<tr><td>" + ($tr.length + 1) + "<td><input type='text' /></td></tr>"); 
 
    }); 
 

 
    $("#btn2").click(function() { 
 
    var $tr = $('table tr'); 
 
    if ($tr.length > 1) { 
 
     $tr.last().remove(); 
 
    } else { 
 
     alert("Row cannot be deleted!"); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <table border="1"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </table> 
 
</form> 
 
<button id="btn1">Add Item</button> 
 
<button id="btn2">Delete Item</button>

+0

这效果很好,除了whille删除,即使留下一个可删除的行,它也开始抛出警告。假设除了标题以外的所有行都可以被删除。 –

+0

你的表没有标题?你的意思是表中至少应该有一行,而不是两行?如果是的话,我更新了你的答案 –

+0

对不起,我不是OP。但你可以尝试运行你的代码。添加第一行(它将有数字2)。现在,尝试删除它。 –

0

$(document).ready(function() { 
 
     var i = 1; 
 
     $("#btn1").click(function() { 
 
      i++; 
 
      $("table").append("<tr id='r" + i + "' ><td>" + i + "<td><input type='text' /></td></tr>"); 
 

 
     }); 
 

 
     $("#btn2").click(function() { 
 
      if (i > 1) { 
 

 
       $("#r" + i).remove(); 
 
       i--; 
 
      } else { 
 
       alert("Row Cannot Be Deleted !"); 
 
      } 
 
     }); 
 
    });
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <form> 
 
    <table border="1"> 
 
     <tr> 
 
      <td> 
 
       1</1> 
 
      <td> 
 
       2 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
    <button id="btn1"> 
 
     Add Item</button> 
 
    <button id="btn2"> 
 
     Delete Item</button> 
 
</body> 
 
</html>