Javascript 如果表格的行或列大小为>；1那么应该采取行动

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

如果只剩下一行或一列，我需要做的是防止“删除”按钮出现：

首先，我尝试查找行和列的长度：

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语句结合起来使其工作

这就是我试图实现的地方。if语句被注释掉，以显示一切是如何工作的。

以下是解决方案：

我将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');

});

var rowCount=$（'.my table tr'）.length；
var columnCount=$（“.my table tr:first>td”）.length；
//通过单击右侧的“添加”按钮添加新列
$（'.addColumnChild'）。单击（函数（）{
$（'.my table tr'）。每个（函数（）{
$（this.append（`）；
})
columnCount++；//这里您将增加列计数
});
//使用列删除按钮向表中添加新单元格
$（'.addColumnChild'）。单击（函数（）{
$（'.del column tr'）。每个（函数（）{
$（'.del column tr'）.append（`${$（'.del column td'）.html（）}`）；
})
});
//通过单击底部的“添加”按钮添加新行
$（'.addRowChild'）。单击（函数（）{
$（'.my table tbody'）.append（`${$（'.default row'）.html（）}`）；
行计数++；
});
//使用行删除按钮向表中添加新单元格
$（'.addRowChild'）。单击（函数（）{
$（'.table del tbody'）.append（`${$（'.del row tr'）.html（）}`）；
});
//查找距离del按钮最近的行，然后单击按钮本身删除该行
$（'.table del'）。在（'click'，'tr'，function（）上{
var trIndex=$（“tr”，$（this）.closest（“table”）.index（this）；
$（$（'.my table tr'）[trIndex]）.remove（）
$（this.remove（）；
行计数--；//减少行计数。。。
})
//查找离dell按钮最近的列，然后单击按钮本身删除该列
$（'.del列'）。在（'click'，'td'，function（）上{
var指数=此.cellIndex；
$（'.my table'）.find（'tr'）.each（function（）{
this.removeChild（this.cells[index]）；
});
$（this.remove（）；
列计数--；
});
//将鼠标悬停在主表中的特定单元格上时显示/隐藏删除按钮
$（document）.on（'mouseover'，'my table tr td'，function（）{
var columnDelIndex=$（“td”，美元）（此）；
var col_num=$（'.my table tr:first>td'）。长度；
$（$（'.del列td'））.addClass（'hide'）；
$（$（'.del row td'））.addClass（'hide'）；
$（$（'.del列td'）
如果（列数>1）{
$（$（'.del column td'）[parseInt（columnDelIndex%col_num）]）.removeClass（'hide'）；
}
如果（行计数>1）{
$（$（'.del row td'）[parseInt（columnDelIndex/col_num）]）.removeClass（'hide'）；
}    
});
//防止将鼠标悬停在删除按钮上时出现死角
var colTimer，rowTimer；
$（document）.on（'mouseleave'，'.my table'，function（）{
colTimer=setTimeout（函数（）{
$（'.del列td'）.addClass（'hide'）；
}, 1000);
rowTimer=setTimeout（函数（）{
$（'.del row td'）.addClass（'hide'）；
}, 1000);
});
$（document）.on（'mouseover'，'del column td'，function（）{
clearTimeout（colTimer）；
});
$（document）.on（'mouseleave'，'.del column td'，function（）{
$（'.del列td'）.addClass（'hide'）；
});
$（document）.on（'mouseover'，'del row td'，function（）{
clearTimeout（rowTimer）；
});
$（document）.on（'mouseleave'，'.del row td'，function（）{
$（'.del row td'）.addClass（'hide'）；
});

让我们把事情简化一点

更改此项：

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

……为此：

$(document).on('mouseover','.my-table tr td',function(){
  var col = $(this).index(),           //current column
      row = $(this).parent().index();  //current row

   $('.del-column-td').addClass('hide');
   $('.del-row-td').addClass('hide');  

   $('.del-column-td').eq(col).removeClass('hide');
   $('.del-row-td').eq(row).removeClass('hide');  
});

如果表格只有一行，则可以阻止显示“行删除”按钮：

if($('.my-table tr').length > 1) {
  $('.del-row-td').eq(row).removeClass('hide');  
}

如果表中没有属于其父级的第二个子级的

td

，则可以阻止列删除按钮显示：

 if($('.my-table td:nth-child(2)').length) {
   $('.del-column-td').eq(col).removeClass('hide');
 }

完整功能：

$(document).on('mouseover', '.my-table tr td', function() {
  var col = $(this).index(),
      row = $(this).parent().index();

  $('.del-column-td').addClass('hide');
  $('.del-row-td').addClass('hide');

  if ($('.my-table td:nth-child(2)').length) {
    $('.del-column-td').eq(col).removeClass('hide');
  }

  if ($('.my-table tr').length > 1) {
    $('.del-row-td').eq(row).removeClass('hide');
  }
});

---

在不同的if语句中尝试此put行和列检查：

var rowCount;
var columnCount;

$(document).on('mouseover','.my-table tr td',function(){
rowCount = $('.my-table tr').length;
columnCount = $(".my-table tr:first > td").length;
var columnDelIndex = $("td", $(this).closest("table")).index(this);
var col_num = $('.my-table tr:first > td').length;   

    if(rowCount > 1) {
    $($('.del-row-td')).addClass('hide');  
    $($('.del-row-td')[parseInt(columnDelIndex/col_num)]).removeClass('hide');
 }
 if(columnCount > 1 ){
    $($('.del-column-td')).addClass('hide');
    $($('.del-column-td')[parseInt(columnDelIndex%col_num)]).removeClass('hide');
 }
});

---

您需要在函数中设置

rowCount

和

columnCount

变量。否则，它们在添加和删除行或列时不会更改。if语句在哪里？将代码发布在此处，而不仅仅是远程站点。您可以使用它使其可执行。并且不要注释掉导致问题的代码。Side注释：

$（$（'.del列td'））

这是毫无意义的，因为内部调用已经要创建一个jQuery对象，外部调用只是要创建一个具有相同元素集合的新对象。至于示例中的最后两个调用，您只需使用它在集合中的指定索引处获取一个元素。@Barmar，我已经在ques下复制了整段代码这里有一个小问题。当有一行时，两个按钮都不会显示。但是如果有一行但超过1列，则应该显示顶部的红色按钮。这可以解决吗？我想复杂的是，一段代码用于隐藏/显示这些按钮，因此很难反同步计时？感谢您提供了如此优雅的解决方案！我不能错过这个机会，并要求您在我的任务中提供更多帮助。当我使用右侧的黄色按钮添加新列时，奇怪的是，有时会在红色“删除”的位置添加一个或两个蓝色单元格按钮应该是。您是否知道它为什么这样做以及如何更正？（图片如下：）在第二个

addColumnChild

单击事件的开头添加此代码：

$（'.del column td'）。addClass（'hide'））

然后在同一事件中将

hide

类添加到append语句中。我知道是什么导致了它。如果删除t