Udało mnie się zrobić to na około (minimum CSS, praktycznie wszystko w JS). Pewnie niesemantycznie, pewnie dało by się lepiej/szybciej. Ale, co tam :) Fakt, faktem że nie działa to idealnie, bo czasami pojawi się błąd, gdyż nie udało mnie się wyeliminować problemu z EventListenerem (co jakiś czas kilka razy się wykonuje, mimo, że teoretycznie wyeliminowałem 'event bubbling'):
Pomysł i 'core' funkcji createClickHandler() zaczerpnąłem stąd http://stackoverflow.com/a/1207963/4983840
Całość wygląda tak:
HTML:
<button type="button" id='delBtn'>X</button>
CSS:
#wrapper #delBtn
{
font-size: 20px;
font-family: arial;
font-weight: bold;
color: white;
background: white;
border: 1px solid white;
position: relative;
}
JavaScript:
function createDeleteBtn(){
var table = document.querySelector('tbody');
var rows = table.querySelectorAll('tr');
var clickable = false;
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row, showHide)
{
return function()
{
var cell = row.querySelectorAll("td")[0];
var inner = cell.innerHTML;
//var wrapper = document.getElementById('wrapper');
var delBtn = document.getElementById('delBtn');
var priceCell = row.querySelectorAll('td')[6];
if (showHide == 'show')
{
//delBtn.style.display = 'block';
delBtn.style.background = 'white';
delBtn.style.border = '1px solid white';
delBtn.style.color = 'red';
//console.log(row.querySelectorAll('td')[5].getBoundingClientRect().left);
var priceCellWidth = priceCell.offsetWidth;
//var priceCellHeight = priceCell.offsetHeight;
var priceCellTop = priceCell.getBoundingClientRect().top - 15;
var priceCellLeft = priceCell.getBoundingClientRect().left - 15;
//console.log('width/top/left ',priceCellWidth, ' / ',priceCellTop, ' / ', priceCellLeft);
delBtn.style.left = priceCellWidth + priceCellLeft + 'px';
delBtn.style.top = priceCellTop + 'px';
clickable = true;
checkClick(clickable,row, priceCellTop);
}
else if (showHide == 'hide')
{
//setTimeout(function(){document.getElementById('delBtn').style. color = 'white'}, 2000);
document.getElementById('delBtn').style. color = 'white';
clickable = false;
}
};
};
//currentRow.onclick = createClickHandler(currentRow);
currentRow.addEventListener('mouseover', createClickHandler(currentRow, 'show'), false);
currentRow.addEventListener('mouseout', createClickHandler(currentRow, 'hide'), false);
var checkClick = function (clickable,row, priceCellTop)
{
if (clickable)
{
var count = 0;
delBtn.addEventListener('click', function(event)
{
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
var count1 = 0;
if (priceCellTop + 'px' == delBtn.style.top && count === 0 && count1 === 0)
{
console.log('klik ',count ,' ' ,row.innerHTML);
var rowP = row.parentNode;
rowP.removeChild(row);
console.log('row parent ',rowP);
count1++;
}
count++;
},false);
}
}
}
};
Przed: http://imgur.com/dE1UOUN
Po: http://imgur.com/QqlFsF5