Skip to content

Instantly share code, notes, and snippets.

@yonatanmn
Last active May 5, 2018 23:31
Show Gist options
  • Save yonatanmn/6c462cef59367db69f04a3a35c7b9b63 to your computer and use it in GitHub Desktop.
Save yonatanmn/6c462cef59367db69f04a3a35c7b9b63 to your computer and use it in GitHub Desktop.
click-delete table, vanila js, gradient bg, https://codepen.io/anon/pen/yjoXyY
<div id="container">
</div>
const $container = document.getElementById('container')
function createTable(numLines){
const countArr = [...Array(numLines)].map((_,i)=>i)
const $lines = countArr.map(i => createLine(i, countArr))
$lines.forEach(line => {
$container.appendChild(line)
})
}
function createCell(i,j, last){
const cell = document.createElement("td");
cell.classList.add(`cell`);
cell.classList.add(i);
cell.classList.add(j);
cell.style.backgroundColor = `rgb(${256/last*i},${256/last*j},0)`
let c = 256+256 - (256+256)/last*i - (256+256)/last*j
if (c < 140) { c = 0 }
cell.style.color = `rgb(${c},${c},${c})`
console.log(256/last*i ,256/last*j)
cell.innerText = `${i},${j}`
if(j === 0){
const $btn = document.createElement("button");
$btn.innerText = 'click'
$btn.addEventListener('click',()=>{alert(`${i},${j}`)})
cell.appendChild($btn)
}
if(j === last){
const $btn = document.createElement("button");
$btn.innerText = 'remove'
$btn.addEventListener('click',()=>deleteLine(i))
cell.appendChild($btn)
}
return cell
}
let redLine = -1
function deleteLine(lineIndex){
// const $lines = Array.from(document.querySelectorAll(`.line`))
// $lines.forEach(l => { l.style.background = 'gray' })
// console.log($lines)
const $red = document.querySelector(`.line.l${redLine}`)
if($red) {
$red.classList.remove('red')
// $red.style.backgroundColor = ''
}
redLine = lineIndex
const $line = document.querySelector(`.line.l${lineIndex}`)
$line.classList.add('red')
// $line.style.backgroundColor = 'red'
}
function createLine( i, countArr){
const $line = document.createElement("tr");
$line.classList.add('line');
$line.classList.add(`l${i}`);
const cells = countArr.map(j => createCell(i,j, countArr.length-1))
cells.forEach(cell => $line.appendChild(cell))
return $line
}
createTable(12)
#container{
background: #111;
}
.line {
padding: 2px;
}
.line.red .cell{
background: red !important;
}
.cell{
color: white;
/* width: 10px; */
/* height: 10px; */
/* background: red; */
padding:7px;
border: 1px solid white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment