Table中删除Tr的JS实现

最新推荐文章于 2023-01-16 14:50:18 发布

原创最新推荐文章于 2023-01-16 14:50:18 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种用于网页中表格元素（TR）的操作方法，包括删除指定的表格行及调整剩余行的顺序和输入框名称。通过JavaScript实现了动态修改表格结构的功能，适用于需要频繁更新表格内容的应用场景。

/**
* 删除TR
* @param size 大小
* @param index 当前TR序号
* @param btnPrefix 删除按钮名称前缀
* @param inputPrefix 调整:input名称前缀
*/
function delTr(size,index,btnPrefix,inputPrefix){
   for(var i =size-1 ;i>index;i--){
       var j = i - 1;
       var $del = $("[name='"+btnPrefix+i+"]']:eq(0)");
       if(typeof($del)== "undefined" ||$del == null || $del.length==0){
           $del = $("[name='"+btnPrefix+i+"']:eq(0)");
           $del.attr("name",btnPrefix+j);
       }else{
           $del.attr("name",btnPrefix+j+"]");
       }
       changeIndex(inputPrefix, i, j);//重新设置input的下标
   }
   //将flag属性重置
   $(":input[name^='"+inputPrefix+"']").each(function(){
       $(this).attr("flag","");//删除完之后重置
   });
}

/**
* 改变input,select,textarea,button的下标
* @param prefix input前缀
* @param oldIndex 原下标
* @param newIndex 新下标
*/
function changeIndex(prefix,oldIndex,newIndex){
   $(":input[name^='"+prefix+"["+oldIndex+"]']").each(function(){
       var flag = $(this).attr("flag");
       if(flag == "1"){
           return;
       }
       var name = $(this).attr("name");
       $(this).attr("name",name.replace(oldIndex,newIndex));
       $(this).attr("flag","1");// 每次改变后就不允许再次改变
   });
}

/**
* 调整TR的顺序
* @param table
* @param tr 需要调整顺序的TR
* @param index 调整的顺序
*/
function changeTrIndex(table,tr,index){
   if(index > 0){
       var row = $('tr:eq('+index+')',table);
       $(tr).insertAfter($(row).next());
   }
}