1. 首頁
  2. 問答
  3. JQuery的刪除（）無法正常工作

JQuery的刪除（）無法正常工作

2016-07-25 153 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，但沒有行被刪除。 因此，添加項目時，「＃」將始終與前面的項目相同。我無法弄清楚爲了得到這樣的結果我做了什麼錯誤。

來源

2016-07-25 Sahar Alsadah

+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>

來源

2016-07-25 09:14:16

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

來源

2016-07-25 09:10:50 brk

+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); 
    };

來源

2016-07-25 09:12:11

0

只是遞減我遲早：

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

來源

2016-07-25 09:14:33 Gatsbill

0

insitaily試圖刪除已alreay遞增我+++

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

所以它提高了我的值，而試圖顯然刪除ID不會在那裏，爲什麼這個問題你可以嘗試這樣

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

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

來源

2016-07-25 09:16:19

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>

來源

2016-07-25 09:16:55

+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>

來源

2016-07-25 09:19:23

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>

來源

2016-07-25 09:19:58 Ray

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>

來源

2016-07-25 09:21:30

+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>

來源

2016-07-25 09:35:42

相關問題

 相關問題