页面table新增或删除行、table中tr互换（行互换）

虽然我们项目中前端使用的是miniui的前段框架，可配置型的前段框架开发起来确实让大部分页面不用程序员再花费更多的精力。但是一些复杂的页面让让需要自己设计。所以整理一下自己页面中涉及到的一些不是很常用但是却再遇到却还是会浪费一些时间得问题，方便下次遇到直接拿来使用。

页面table代码

下面是部分页面代码，这里只涉及到table的操作并未用到其他所以只贴这一点。另外因为使用的是miniui的控件所以部分type或者class可能看起来有点别扭。

<table id="table2" class="table2" >
   <tr id="rowItem1">
        <td align="right" style="width: 120px;"><label for="file$"></label></td>
        <td align="right" style="width: 120px;"><input type="file" name="file" /></td>
        <td style="width : auto;"   align="left">
            <a id="table2addrow1"  class="mini-button" plain="false" onclick="moveDownRow(1)" >↓</a>
            <a id="table2addrow11"  class="mini-button" plain="false" onclick="moveUpRow(1)" >↑</a>
            <a id="table2delrow12"  class="mini-button" plain="false" onclick="addRow2('table2')" >添加</a>
            <a id="table2addrow13"  class="mini-button" plain="false" onclick="delRow('table2',1)" >删除</a>
        </td>
    </tr>
</table>

table新增、删除、行互换、

    //引入js
   <script src="${contextPath}/scripts/boot.js" type="text/javascript"></script>
   <script src="${contextPath}/scripts/jquery-form.js" type="text/javascript"></script>
   <script src="${contextPath}/scripts/jquery-3.2.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
   //添加一行——————————————————————————————开始————————————————
   //id变更参数，从2开始因为表格默认已经有一行了
   var table2ItemNum = 2;
   function addRow2(){
       $("#table2").append(
               '<tr  id="rowItem'+table2ItemNum+'">'+
                   '<td align="right" style="width: 120px;"><label for="file"></label></td>'+
                   '<td align="right" style="width: 120px;"><input type="file" name="file'+table2ItemNum+'" /></td>'+
                   '<td style="width : auto;" align="left">' +
                       '<a   class="mini-button" plain="false" "moveDownRow('+table2ItemNum+')" >↓</a>&nbsp' +
                       '<a   class="mini-button" plain="false" "moveUpRow('+table2ItemNum+')" >↑</a>&nbsp' +
                       '<a   class="mini-button" plain="false" "addRow2()" >添加</a>&nbsp' +
                       '<a   class="mini-button" plain="false" "delRow(\'table2\','+table2ItemNum+')" >删除</a>&nbsp' +
                   '</td>'+
               '</tr>'
       );
       table2ItemNum++;
       //下面这行是miniui关于页面miniui控件重新编译的，不是用miniui的不用加下面代码
       mini.parse();
   }
   //添加一行——————————————————————————————结束————————————————
   //删除指定行—————————————————————————————开始————————————————
   /**
    * 删除当前行（至少留一行）
    * */
   function delRow(tableName,itemNum){
       //判断是否只剩下一行
       var _len = $("#"+tableName+" tr").length;
       if(_len==1){
           atomErrorAlert("至少保留一行设置！");
           return;
       }
       var index=$("#rowItem"+itemNum).index();
       var x=document.getElementById(tableName);
       x.deleteRow(index);//删除一行
   }
   //删除指定行—————————————————————————————结束————————————————
   //行互换(通过tr在表格的位置)      ————————————————————开始———————————————— 
   //行互换
   function moveRowFun(trIndex1, trIndex2) {
       $("#table2 tr:nth-child(" + trIndex1 + ")").insertAfter($("#table2 tr:nth-child(" + trIndex2 + ")"));
   }
   //行上下移动
   //这里使用tr在表格中的位置而不使用其他选择方式，是因为你存在多次交叉换行的时候如果使用其他选择控件可能会导致上下换行换的是最初顺序的上下行而不是打乱后顺序的上下行
   //向下换一行
   function moveDownRow(rowNum){
       //判断是否只有一行
       var _len = $("#table2 tr").length;
       if(_len==1){
           return;
       }
       var trIndex=$("#rowItem"+rowNum).index();
       var trIndex1 = Number(trIndex)+Number("1");
       var trIndex2 = Number(trIndex1)+Number("1");
       moveRowFun(trIndex1,trIndex2);
   }
   //向上换一行
   function moveUpRow(rowNum){
       //判断是否只有一行
       var _len = $("#table2 tr").length;
       if(_len==1){
           return;
       }
       var trIndex=$("#rowItem"+rowNum).index();
       var trIndex1 = Number(trIndex)+Number("1");
       var trIndex2 = Number(trIndex1)-Number("1");
       moveRowFun(trIndex2,trIndex1);
   }
   //行互换(通过tr在表格的位置)      ————————————————————开始————————————————