Question

我有这个条件：

$(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代码;那么如果有2个表行：对于第一个表行，它将插入类'down'，对于最后一个表行，它将插入类'up';如果有3个表行：对于第一个表行，它将插入类'down'，第二个表行，它将插入类'up'和'down'，对于第三个表行，它将插入上课“下来”。对于摘要，如果有2个或更多表行，那么第一个表行和类''的类只应为'up'，最后一个表行为down。

Answer 1

$('#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
   }
});

如果在jQuery + append函数中有其他条件

1 个答案: