2014-03-25 18 views
1

我有這樣的條件:如果jQuery的其他條件+附加功能

$(document).on("click", "#save, .delRow, #closeAddButton", function (e) { 
    if ($(this).is("#save")) { 
     $($("#template").html()).appendTo("#dataTables-example"); 
     $(".rowValue").append($("#textValue").val()).attr("class", "rowValues"); 
     $(".taskValue").append($("#task").val()).attr("class", "taskValues"); 
     $(".ProleValue").append($("#primaryRole").val()).attr("class", "roleValues"); 
     var stuff = $("#secondaryRole").val(); 
     var result = (stuff.substr(stuff.length-2, 2) == ", ")? stuff.substr(0, stuff.length-2):stuff; 
     $(".SroleValue").append(result).attr("class", "roleValues"); 
     $(".actions").append('<a href="#" class="edit" data-toggle="modal" data-target="#myModalEdit"><i class="fa fa-edit fa-fw"></i></a>' + 
          '<a href="#" class="delRow"><i class="fa fa-trash-o fa-fw"></i></a>').attr("class", ""); 
     /* Update Numbering */ 
     updateRowOrder(); 
     if($('#dataTables-example tbody tr').length == 2) 
     { 
      $('#dataTables-example tbody tr:first').find('.moveDown').show(); 
      $('#dataTables-example tbody tr:last').find('.moveUp').show(); 
     } 
     else if ($('#dataTables-example tbody tr').length > 2) 
     { 
      $('#dataTables-example tbody tr:first').find('.moveDown').show(); 
      $('#dataTables-example tbody tr').find('.moveUpDown').show(); 
      $('#dataTables-example tbody tr:last').find('.moveUp').show(); 
     } 
     else { 

     } 
    } 
}); 

});

這是我的HTML:

<table class="table table-bordered" id="dataTables-example"> 
           <thead> 
             <tr> 
              <td>Order</td> 
              <td>Activity</td> 
              <td>Task Code</td> 
              <td>Primary Role Code</td> 
              <td>Secondary Role Code</td> 
             </tr> 
           </thead> 
           <tbody> 
            <script id="template" type="text/template"> 
            <tr class="move"> 
             <td class="id"></td> 
             <td><p class="rowValue"></p></td> 
             <td><p class="taskValue"></p></td> 
             <td><p class="ProleValue"></p></td> 
             <td><p class="SroleValue"></p></td> 
             <td><p class="actions"></p></td> 
             <td><p class="moveUp" style="display:none;"><a href="#" class="up"><i class="fa fa-arrow-up fa-fw"></i></a></p> 
              <p class="moveUpDown" style="display:none;"> 
               <a href="#" class="up"><i class="fa fa-arrow-up fa-fw"></i></a> 
               <a href="#" class="down"><i class="fa fa-arrow-down fa-fw"></i></a> 
              </p> 
              <p class="moveDown" style="display:none;"><a href="#" class="down"><i class="fa fa-arrow-down fa-fw"></i></a></p> 
             </td> 
            </tr> 
            </script> 
           </tbody> 
           </table> 

如果我點擊 '添加' 按鈕,將追加的HTML代碼。如果錶行只有1,我該如何在這段代碼中插入if..else語句:它不會插入html代碼;那麼如果有兩個錶行:對於第一個錶行,它將插入類'down',對於最後一個錶行,它將插入'up'類;如果有3個表格行:對於第一個表格行,它將插入類'down',第二個表格行,它將插入'up'和'down'類,對於第三個表格行,它將插入班'下'。 對於總結,如果有2個或更多的表格行,那麼應該只有第一個表格行的'up'類和最後一個表格行的'down'類。

+1

檢查上面的條件,並存儲在HTML標記中的變量,並通過它像追加(可變) –

+0

不知道如果我完全理解你的問題,但你不能指望只用$數量或行( 「.upDown tr」).length然後使用標準的JS if ... else語句根據行數決定運行哪個代碼?如果您發佈了您需要的HTML代碼片段,則可以更容易地對其進行可視化。 – somecallitblues

+0

我在上面編輯我的代碼。我正在努力。但是我的問題是每次我會'ADD',我怎麼能再次處理代碼或重新計算,以便它會找到第一個和最後一個表格行。 – user00602

回答

0
$('#addButton').click(function(){ 
    var count = $('#dataTables-example tbody tr').length; 
    if(count > 1) 
    { 
    $(#dataTables-example tbody tr:first-child).addClass("up"); // add class for first row 
    if(count > 2) 
    { 
     for(i=1;i<(count-1); i++) 
     { 
     $(#dataTables-example tbody tr).eq(i).addClass("up down"); //add class for intermediate rows 
     } 
    } 
    $(#dataTables-example tbody tr:last-child).addClass("down"); // add class for last row 
    } 
});