javascript - 如果表的行或列大小 > 1，则应该可以执行操作

Question

我有一张蓝色的 table 。通过将鼠标悬停在它的单元格上，用户可以看到两个红色按钮:一个用于删除列，一个用于删除行。

我需要做的是在只剩下一行或一列的情况下防止出现“删除”按钮:

首先我尝试找出行和列的长度:

var rowCount = $('.my-table tr').length;
var columnCount = $(".my-table > tr:first > td").length;

然后我做一个if语句:

if rowCount > 1 and columnCount > 1 {}

但是如果我将应该隐藏/显示红色按钮的代码放在 if 语句内的蓝色单元格上悬停 - 它不起作用:

var rowCount = $('.my-table tr').length;
var columnCount = $(".my-table > tr:first > td").length;

if rowCount > 1 and columnCount > 1 {

$(document).on('mouseover','.my-table tr td',function(){
     var columnDelIndex = $("td", $(this).closest("table")).index(this);
   var col_num = $('.my-table tr:first > td').length;   
   $($('.del-column-td')).addClass('hide');
   $($('.del-row-td')).addClass('hide');  
   $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
   $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide');  
});
}

我应该如何将此代码与 if 语句结合起来使其工作？

这里是 my working demo我正在尝试实现这一点。 if 语句被注释掉以显示一切是如何工作的。

Answer 1

解决方法如下: https://jsfiddle.net/j4n4p0ns/1/

我已将 var rowCount 和 columnCount 作为全局变量，使用初始行数和列数设置它们，然后当您删除/添加它们时，您将相应地更改它们。

代码如下:

var rowCount = $('.my-table tr').length;
var columnCount = $(".my-table tr:first > td").length;

// adding new column by clicking the add button on the right
$('.addColumnChild').click(function() {
  $('.my-table tr').each(function() {
    $(this).append(`<td></td>`);
  })
  columnCount++; //here you will increment the column count
});

// adding new cell to the table with column delete buttons

$('.addColumnChild').click(function() {
  $('.del-column tr').each(function() {
    $('.del-column tr').append(`<td class="del del-column-td">${$('.del-column-td').html()}</td>`);
  })
});

// adding new row by clicking the add button on the bottom

$('.addRowChild').click(function() {
  $('.my-table tbody').append(`<tr>${$('.default-row').html()}</tr>`);
  rowCount++;
});

// adding new cell to the table with row delete buttons

$('.addRowChild').click(function() {
  $('.table-del tbody').append(`<tr>${$('.del-row-tr').html()}</tr>`);
});

// finding nearest row to the del button and on click deleting it with the button itself

$('.table-del').on('click', 'tr', function() {
  var trIndex = $("tr", $(this).closest("table")).index(this);
  $($('.my-table tr')[trIndex]).remove()
  $(this).remove();
  rowCount--;  //decrease the row count...
})

// finding nearest column to the dell button and on click deleting it with the button itself

$('.del-column').on('click', 'td', function() {
  var index = this.cellIndex;

  $('.my-table').find('tr').each(function() {
    this.removeChild(this.cells[index]);
  });
  $(this).remove();
  columnCount--;
});

// showing/hiding delete buttons when hovering over a particular cell in the main table  


$(document).on('mouseover','.my-table tr td',function(){
     var columnDelIndex = $("td", $(this).closest("table")).index(this);
   var col_num = $('.my-table tr:first > td').length;   
   $($('.del-column-td')).addClass('hide');
   $($('.del-row-td')).addClass('hide');  
   $($('.del-column-td')   
if(columnCount>1){
   $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
   }
   if(rowCount>1){
   $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide');  
   }    
});


// preventing delete buttons diappear when hovering over them

var colTimer, rowTimer;
$(document).on('mouseleave','.my-table',function(){ 
   colTimer = setTimeout(function() {
     $('.del-column-td').addClass('hide');
   }, 1000);

     rowTimer = setTimeout(function() {
     $('.del-row-td').addClass('hide');
   }, 1000);
});

$(document).on('mouseover','.del-column-td',function(){
    clearTimeout(colTimer);
});

$(document).on('mouseleave','.del-column-td',function(){    
  $('.del-column-td').addClass('hide');
});

$(document).on('mouseover','.del-row-td',function(){
    clearTimeout(rowTimer);
});

$(document).on('mouseleave','.del-row-td',function(){   
   $('.del-row-td').addClass('hide');

});