2016-03-07 63 views
2

我覺得他很簡單,但我不知道爲什麼代碼不工作。jquery限制添加部分視圖

我動態地在我的視圖中使用分部視圖添加文本框,但我想添加行數的限制添加。以下是我的代碼,但它不限制要添加的行數。

請幫助,在此先感謝。

@section Scripts { 
@Scripts.Render("~/bundles/jquery") 
<script> 
    $("#btnAdd").on('click', function() { 
     var counter = 0; 

     if (counter > 5) { 
      alert("Limit Exceeds"); 
      return false; 
     } 
     else { 
      $.ajax({ 
       async: false, 
       url: '/Employee/Add' 
      }).success(function (partialView) { 
       $('#Add > tbody').append("<tr>" + partialView + "</tr>"); 
      }); 
     } 

     counter++; 
    }); 

    function deleteRow() { 
     var par = $(this).parent().parent(); 
     par.remove(); 
    }; 
    $("#Add").on("click", ".BtnRemove", deleteRow); 
</script> } 
+4

問題是,每次單擊「btnAdd」時'counter'總是被設置爲'0',所以這就是爲什麼你的代碼總是進入'else'塊。 – ekad

+0

哦,是的,謝謝.. – makoto

+0

@ekad我在我的解決方案中添加了一個選項,以減少計數器一個,如果你想仍然能夠添加行,如果一個已被刪除,使計數器值低於5。 –

回答

2

先給變量全球範圍內,如果你想,當你刪除行以減少數,您可以通過一個,當你刪除它降低了櫃檯。

var counter = 0;//<-- give the variable global scope 

$("#btnAdd").on('click', function() { 


     if (counter > 5) { 
      alert("Limit Exceeds"); 
      return false; 
     } 
     else { 
      $.ajax({ 
       async: false, 
       url: '/Employee/Add' 
      }).success(function (partialView) { 
       $('#Add > tbody').append("<tr>" + partialView + "</tr>"); 
      }); 
     } 

     counter++; 
    }); 

    function deleteRow() { 
     var par = $(this).parent().parent(); 
     par.remove(); 

     //Remove comment to decrease counter by one 
     //counter--; 

    }; 
    $("#Add").on("click", ".BtnRemove", deleteRow);