table删除tr有合并单元格,在点击删除时应删除当行tr，并改变td合并行的行数 new file table{ margin: 0px; padding: 0px; border: 1px solid #ccc; width: 300px; height: 300px; border-collapse: collapse; } table td{ border: 1px solid #ccc; text-align: center; line-height: 30px; }
0000111111删除222222删除333333删除444444删除1111111111删除444444删除444ee444ee删除 </body> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> $(function(){ table.init(); }); var table = (function(){ var setTable = function(){ $("tr .del").each(function(){ //给每一行的删除绑定点击事件 $(this).on("click",function(e){ //获取点击按钮所在行的class var lins = $(this).parents("tr").attr("class"); //如果有class,说明点击的是合并行Td所在的tr if (lins) { //console.log(lins); //获取合并行数 var row = $(this).parents("tr").children().eq(0).attr("rowspan"); //如果只有 一行，则代表没有合并，只有删除改行 if (row == 1) { $(this).parents("tr").remove(); } else { //代表改行td有合并多行，每点击一次删除一行，合并行数也减少一行 var rows = row-1; //因为点击的是第一个tr，如果删除，则需要把合并行的td转移到下一行，获取之前合并行的td 里面的内容 var html = $(this).parents("tr").children().eq(0).html(); //获取删除行的下一行 var nextTr = $(this).parents("tr").next(); //获取删除行的下一行的第一个td var firstTd = nextTr.children().eq(0); //新加入的td,需要合并行 var td = "<td rowspan='"+rows+"'>"+html+"</td>"; //并将class转移到下一行的tr上 nextTr.attr("class",lins); //将新增的td放在下一行的第一列 firstTd.before(td); //执行删除操作 $(this).parents("tr").remove(); } } else { //如果点击的不是合并行td所在的tr上，找到点击删除按钮tr所在的行索引 var trIndex = $(this).parents("tr")[0].rowIndex; //该table上所有的tr var allTr = $(".table").find("tr"); //从下往上找，离删除行最近的有合并行td所在的tr for (var i = allTr.length-1; i >=0;i--){ if (i < trIndex) { //获取class,如果存在class，则代表已找到离删除行最近的有合并行td的tr,执行删除，合并操作，并退出循环 var linsClass = $(allTr[i]).attr("class"); if (linsClass) { var row = $(allTr[i]).children().eq(0).attr("rowspan"); if (row == 1) { $(allTr[trIndex]).remove(); } else { var rows = row-1; $(allTr[i]).children().eq(0).attr("rowspan",rows); $(allTr[trIndex]).remove(); } break; } } } } }); }); }; return { init : function(){ setTable(); } } })(); </script>