Look carefully at the following code :
import {make, selectBase, h1, unselectBase, div} from './dml.js'
const cssRow = `
display:flex;
align-items:center;
margin:0;
`
const cssCol1 = `
background:lightgrey;
color:black;
padding:2px;
margin-bottom: 0px;
margin-top:1px;
`
const cssInp = `
line-height:1.5rem;
text-align:center;
border:none;
border-bottom:1px solid black;
margin:0;
border-right: 1px solid black;
`
const input = (props) => {
let inp = make("input", props);
inp.style = cssInp;
return inp;
}
let row = (n) => {
let r = selectBase(div('', cssRow))
div("" + n, "line-height:1.5rem;padding-right:8px")
let inparray = Array.from([...Array(4)]).map((elt, i) => {
let inp = input({value : i + 4 * n});
inp.onclick = () => updateMsg(inp.value);
inp.style.cursor = "pointer";
return inp;
})
unselectBase();
return inparray;
}
selectBase(div("","width:590px;margin: 0 auto;"))
let r0 = row(0)
let r1 = row(1)
let r2 = row(2)
let r3 = row(3)
unselectBase()
let msg = h1("")
function updateMsg (value) {
msg.innerHTML = `Info : the content of the selected cell is ${value}`
}
r0.map(i => i.style.background = 'red');
r1.map(i => i.style.background = 'orange');
r2.map(i => i.style.background = 'yellow');
r3.map(i => i.style.background = 'green');
See how you can control every element composing this table.
For example, try to see
- what rows (r0...r3) refer to.
DML is really the new JQuery in Town :-)
You can test it here ColoredTable
Top comments (0)