Question

也许有人可以帮我处理我的申请。

我有一个方形和4个按钮（加上行，减去行，加上列，减去列）。 Square

我现在需要的“左减号按钮（行）” - 当鼠标位于第二行减去按钮时应靠近第二行，如果第一行 - 靠近第一行等等。

我的解决方案现在吼叫

function changeVposition(move) {
        var top = move.getBoundingClientRect().top;
        var bottom = move.getBoundingClientRect().bottom;        
        var minusRow = document.getElementById("deleteRow");
        minusRow.style.position = "absolute";
        minusRow.style.top = (top) + 'px';
        minusRow.style.bottom = (bottom) + 'px';
   }

这里我从每个<tr>元素坐标（顶部和底部）

中取出

<tr onmousemove="changeVposition(this)">并将它们发给我的按钮。

但是当我尝试添加一些行时，行为发生了变化，这是不可预测的。

one more

按钮的css和所有页面如下：

* {
  margin: 0; padding: 0;
}

body {
  padding-top: 150px;
  padding-bottom: 150px;
  display: flex;
  justify-content: center;

}


table {
  border: 1px solid #00A1D4;
  margin-left: auto;
  margin-right: auto;

}

.cell {
  width:80px;
  height:80px;
  background-color:#00A1D4;
  
}

.cell:hover {
  background-color:#4B496E;
}


#appendCol {
  width: 80px;
  height: 80px;
  background-color: #FFBA5C;
  border: none;
  background-image: url("plus.png");
  background-repeat: no-repeat;
  background-position: center;
  top: 3px;
  right: -84px;
  margin: 0px;
  position: absolute;

}

#appendRow {
  width: 80px;
  height: 80px;
  background-color: #FFBA5C;
  border: none;
  background-image: url("plus.png");
  background-repeat: no-repeat;
  background-position: center;
  bottom: -84px;
  left: 3px;
  padding: 0px;
  margin: 0;
  position: absolute;

}




#deleteRow {
  width: 80px;
  height: 80px;
  background-color: #881013;
  border: none;
  background-image: url("minus.png");
  background-repeat: no-repeat;
  background-position: center;
  left: -84px;
  padding: 0px;
  margin: 0; 
  position: absolute;
}

#deleteCol {
  width: 80px;
  height: 80px;
  background-color: #881013;
  border: none;
  background-image: url("minus.png");
  background-repeat: no-repeat;
  background-position: center;
  top: -84px;
  right: 0px;
  padding: 0px;
  margin: 0;
  position: absolute;
}

.container {
  position: relative;
  display: inline-block;

}

Answer 1

function changeVposition(move) {
        var top = move.offsetTop;      
        var minusRow =           document.getElementById("deleteRow");
        minusRow.style.position = "absolute";
        minusRow.style.top = (top) + 'px';
    
        
    }

我找到了解决方案，使用offsetTop代替getBoundingClientRect().top

需要动态更改按钮

1 个答案: