• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Dynamiczne dodawanie przycisku obok podświetlonego wiersza tabeli

VPS Starter Arubacloud
0 głosów
190 wizyt
pytanie zadane 28 grudnia 2015 w HTML i CSS przez ScriptyChris Mędrzec (190,190 p.)
zamknięte 9 marca 2016 przez ScriptyChris

Problem zapewne banalny, ale jakoś nie po drodze mi z CSS i nawet proste rzeczy stają się problematyczne.

Mam tabelę i chcę, aby przy każdym jej wierszu, gdy zrobię hover, pojawił się przycisk (np. w kształcie litery X).

Po pierwsze nie wiem dlaczego tabela nie zajmuje ustalonych 70% diva #wrapper, bo jest odstęp pomiędzy nią a divem z miejscami na przyciski.

Po drugie, nie wiem w jaki sposób zrobić dynamiczne tworzenie tych przycisków tylko w momencie hovera na danym wierszu tabeli. Tzn., aby tych przycisków "X" fizycznie nie było, dopóki nie najadę na dany wiersz tabeli. Wiem, że w JS mogę zrobić document.createElement(), ale jak w CSS (dynamicznie) umieszczać to tak jak na rysunku - obok podświetlonego wiesza tabeli?

Chce osiągnąć taki rezultat (mniej więcej - dorysowane w Paint):

Teraz mam takie pokraczne coś: http://imgur.com/OQAlA6M

HTML

<div id="wrapper">
		<table>
			<thead>
				<tr id="headers"></tr>
			</thead>
			<tbody></tbody>
		</table>
		<div id="deleteButtons">X<br>X<br>X</div>
		<br id="space">
</div>

CSS:

body{
	/*width: 1150px;*/
	margin:20px;
	font-size: 22px;
}
#wrapper{width: 100%;}
#wrapper table {width: 70%; position: relative; display: inline-block;border:1px solid #eee; border-radius: 4px; float: left;}
/*#wrapper table thead, #wrapper table tbody {width: 100%; position: relative;}*/
#wrapper table th {text-align: center; font-variant: small-caps; color:#333; text-transform: lowercase;}
#wrapper table td {text-align: center; padding:5px 4px; color:#777;}
#wrapper table thead th {background: orange;} 
#wrapper table tbody tr td {border-bottom: 1px solid orange;} 
#wrapper table tbody tr td:first-child {border-left: 1px solid orange;} 
#wrapper table tbody tr td:last-child {border-right: 1px solid orange;} 
#wrapper table tbody tr td:first-child  {background: beige;} 
#wrapper table tbody tr:hover td {background:lightgreen;} 

#wrapper #deleteButtons {display: inline-block; position: relative; relative; height: 200px; background: red; float: left;}

#space {clear: both;}

 

komentarz zamknięcia: Problem nieaktualny

2 odpowiedzi

+1 głos
odpowiedź 29 grudnia 2015 przez Comandeer Guru (599,730 p.)
Niech przycisk będzie w kolejnej komórce tabeli, domyślnie ukrytej, natomiast będzie ona pokazywana przy tr:hover.
0 głosów
odpowiedź 29 grudnia 2015 przez ScriptyChris Mędrzec (190,190 p.)

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

Podobne pytania

+1 głos
1 odpowiedź 606 wizyt
pytanie zadane 20 października 2017 w JavaScript przez SzymonSmith Użytkownik (870 p.)
0 głosów
2 odpowiedzi 121 wizyt
0 głosów
1 odpowiedź 287 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...