Html 图像在<；tr>；悬停以删除行

目标：将鼠标悬停在表行

上会导致

元素右侧（表外）出现一个按钮。单击此按钮将删除该行

我正在与CSS和显示按钮的机制作斗争。我发现我能够在

标记上创建所需的按钮隐藏/显示行为，但我不知道如何在表中实现它

实际删除该行对我来说相当简单

$('table tr input').click(function(e) {
  var answer = confirm("Delete row?")
  if (answer) {

   var ind=$(this).closest('td').parent()[0].sectionRowIndex;
   $("tr:eq("+ind+")").remove();

  } else {
    //some code
  }

});

---

这很简单，只有两条CSS规则：

$（'table td:last child button'）。单击（函数（e）{
var应答=确认（“删除行？”）
若有(答复){
var$row=$（this.closest（'tr'）；
$row.remove（）；
}否则{
//一些代码
}
});
tr>td:last child>按钮{可见性：隐藏；}
tr:hover>td:last child>按钮{可见性：可见；}

校长1
校长2
校长3
数据1
数据2
数据3x
数据4
数据5
数据6x
数据7
数据8
data9x
关于“表外”要求，您可以尝试将按钮放在第四列，而不是将绝对/相对位置与行位置匹配。将边框应用于TDs，并关闭边框或第4列，而不是将边框应用于表。这将使您的按钮与行对齐，但看起来好像它在表之外



。显示图像{
边框：实心1px黑色；
}
.显示图像th{
边框顶部：纯色1px黑色；
}
.显示图像th：第一个孩子{
左边框：实心1px黑色；
}
.显示图像th：最后一个孩子{
右边框：1px纯黑；
}
.显示图像td：最后一个孩子{
边界：0；
}
.显示图像td：最后一个子输入{
显示：无；
}
.显示图像tr:hover>td:last child>input{
显示：块；
}
表1.1-1{
表格填充：0；
表间距：0；
边界塌陷：塌陷；
}

校长1
校长2
校长3
数据1
数据2
数据3
数据4
数据5
数据6
数据7
数据8
数据9