Untitled

dabblet.css

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);

* {
   box-sizing: border-box;
   font-family: Roboto;
}  
 
 body{
   margin:0;
 }

.tools{
	width: 100%;
	height: 60px;
	position: relative;	
	background: lightgray;	
	overflow: hidden;
}


.first-area, .second-area{
	position: absolute;
	left: 0;
	width: calc(100% - 40px);
	height: 100%;
	transition: top 0.7s;
}

.first-area{
	top: 0;
}

.second-area{
	top: 100%;
}


#search-field{

	width: 80%;

	height: 35px;

	margin: 10px auto 0 10%;

	border-radius: 5px;

	padding-left: 30px;

}



#filter-button{

	width: 40px; 

	height: 35px;

	border-radius: 5px;

}



#up-page, #down-page{

	position: absolute;

	right: 0;

	height: 50%;

	width: 40px;

	border-radius: 5px;

	/*border: none;*/

	background: linear-gradient(to bottom, lightgray, white, lightgray);

}



#up-page{
	top: 0;
}

#down-page{
	top: 50%;
}

.container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
}

td button{
  background: none;
  border: none;
  outline: none;
}

table{ 
  font-family: arial, sans-serif;
  font-size: 0.9em;
  border-collapse: collapse;
  width: 90%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(odd) {
  background-color: #dddddd;
}

table tr:nth-child(1){    

  background: linear-gradient(to bottom, lightgray, 

  	rgb(165,165,165),

  	rgb(170,170,170) , 

  	rgb(165,165,165),

  	lightgray);

  border-radius: 4px;

  text-align: center !important;

}

.highlight{
	background-color: lightblue !important;
}

.selected{
	background-color: lightblue !important;
}
tr:hover{
	background: lightblue;

}

dabblet.html

<div class='tools'>

	<button id="up-page"> ▲ </button>

	<button id="down-page"> ▼ </button>

	<div class="first-area">

		<input type="text" id="search-field" />

		<button id="filter-button">X</button>

	</div>

	<div class="second-area"></div>



</div>



<div class="container">

	

	<table>

		<tr>

	  		<td>

				<span>Kişi</span>

			 	<button>▼</button>

			</td>

			<td>  

				<span>Firma adı</span>

			    <button>▼</button>

			</td>

			<td>

			    <span>E-mail</span>

			    <button>▼</button>

			</td>

			<td>

				<span>Telefon</span>

			    <button>▼</button>

			</td>

			<td>

			    <span>Kayıt oluşturan</span>

			    <button>▼</button>

			</td>

		</tr>

  </table>

</div>

dabblet.js

const tableElement = document.querySelector('table');
const firstToolContainer = document.querySelector('.tools .first-area');
const secondToolContainer = document.querySelector('.tools .second-area');
const upButton = document.querySelector('.tools #up-page');
const downButton = document.querySelector('.tools #down-page');

downButton.addEventListener('click', function(){
	firstToolContainer.style.top = '-100%';
	secondToolContainer.style.top = '0';
});

upButton.addEventListener('click', function(){
	firstToolContainer.style.top = '0';
	secondToolContainer.style.top = '100%';
});

const costumers = [ 
	{
		name:'Gökhan',
		surname:'Aslan',
		firm:'Beymen',
		email:'gknasln@gmail.com',
		author:'Murat Erat',
		phone:'507 009 35 58', 
		webSite:'www.gokhanaslan.com.tr'
	},
	{
		name:'Sinan',
		surname:'Odak',
		firm:'Dashmon',
		email:'sinanodak@gmail.com',
		author:'Murat Erat',
		phone:'507 009 35 58', 
		webSite:'www.modahayat.com.tr'
	},	
	{
		name:'Hakan',
		surname:'Karaduman',
		firm:'Dashmon',
		email:'karadumanhakan@gmail.com',
		author:'Gökhan Aslan',
		phone:'532 369 35 48', 
		webSite:'www.hakankaraduman.com.tr'
	},
	{
		name: 'ipek',
		surname: 'hitay'
	},
	{
		name: 'Yağmur',
		surname: 'Genel'
	},
	{
		name: 'İnci', 
		surname: 'Türkdoğan'
	}
];

const views = ['firm', 'email', 'phone', 'author'];

let table = " <tr> <th style='text-align: center;'> <input type='checkbox'> </th> " ;

table += "<td> Kişi </td>"

for(var x = 0; x < views.length; x++){
	table += '<td> ' + translate(views[x]) + ' </th>';
}

table += '</tr>';
for(var i = 0; i < costumers.length; i++){
	table += '<tr> <td style="text-align: center;"> <input type="checkbox" data-index= ' + i + '> </td> '
	table += '<td> ' + costumers[i]['name'] + ' ' + costumers[i]['surname'] + ' </td> ' ;
	for(var j = 0; j < views.length; j++){
		table += '<td> ' + costumers[i][views[j]] + ' </th>';
	}
	table += '</tr>';	
}

tableElement.innerHTML = table;

function translate(word){
	switch(word){
		case 'firm':
			return 'Firma';
			break;
		case 'email': 
			return 'E-mail';
			break;
		case 'author': 
			return 'Kayıt oluşturan';
			break;
		case 'phone' :
			return 'Telefon';
			break;
		case 'webSite':
			return 'Web Sitesi';
			break;
	}
}
/*
tableElement.addEventListener('mousemove', function(e){
	if(e.target.parentElement.tagName == 'TR' && e.shiftKey){
		alert();
	}
});
*/
const rows = document.querySelectorAll('table tr');
let lastIndex;
var i = 0;
for(; i < rows.length; i++){
	rows[i].querySelector('input').addEventListener('click', function(e){
		if(this.checked){
			lastIndex = this.dataset.index; 
			this.parentElement.parentElement.classList.add('selected');
		}else{
			lastIndex = null;
			this.parentElement.parentElement.classList.remove('selected');
		}
		if(this.checked && e.shiftKey){
			for(var y = 0; y <  rows.length; y++){
				
			}
		}
	});
	rows[i].addEventListener('mousemove', function(e){
		if(e.shiftKey){
			if(lastIndex){
				let currentIndex = this.querySelector('input').dataset.index;
				if(lastIndex > currentIndex){
					for(var j = 0 ; j < rows.length; j++){
						if(currentIndex < j &&  (j-1) <= lastIndex ){
							rows[j].classList.add('highlight');
						}else{
							rows[j].classList.remove('highlight');
						}
					}

				}else{
					for(var j = 0;j < rows.length; j++){	
						if(currentIndex >= j &&  j > lastIndex ){
							rows[j].classList.add('highlight');
						}else{
							rows[j].classList.remove('highlight');
						}
					}
				}
			}
		}
	});
}

window.addEventListener('keyup', function(e){
	if(e.key == 'Shift'){
		for(var y = 0; y < rows.length; y++){
			rows[y].classList.remove('highlight');
		}
	}
});

/*
document.querySelectorAll('td input').forEach((checkbox, i) => { 
		checkbox.onclick = function(e){
			if(e.shiftKey){
		    alert(e.shiftKey);
			}
   }

});*/

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}