1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <style>
.highlight {background-color:black;}
.tblitem{margin: 0.06rem 0.06rem;width: 2rem;height: 2rem; color: white;font-weight: 500; border-radius: 0.12rem;box-shadow: 0 0 0.6rem 0.15rem; text-align: center; line-height: 1.6rem; font-size:1.4rem;background-color:rgba(63, 81, 181, 0.5);}
.tblheader{margin: 0.06rem 0.06rem;width: 2rem;height: 2rem; color: white;font-weight: 500; border-radius: 0.12rem;box-shadow: 0 0 0.6rem 0.15rem; text-align: center; line-height: 1.6rem; font-size:1.4rem;background-color:#5698a9;}
</style>
<div id="defitablo" data-resultat="18"></div>
<script>
function ClickSurCase(el){
el["textContent"] = $(el).attr("data-val");
if($(el).attr("data-val") == $(el).attr("data-resultat")) console.log("resultat juste");
}
function ConstruireDefi(){
result=[];
result[0]='<tr><td class="tblheader">×</td>';
for(let i=1;i<10;i++){result[0] +='<td class="tblheader">'+i+'</td>';result[i] ='<tr><td class="tblheader">'+i+'</td>';
for(let j=1;j<10;j++) result[i] +='<td class="tblitem" data-num="'+i+';'+j+'" data-val="'+(i*j)+'"></td>';
result[i] +='</tr>';
}
result[0] +='</tr>';
$("#defitablo").html('<table>'+result.join("")+'</table>');
$('.tblitem').on('mouseover', function() {$(this).closest('tr').addClass('highlight');$(this).closest('table').find('.tblitem:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');});
$('.tblitem').on('mouseout', function() {$(this).closest('tr').removeClass('highlight');$(this).closest('table').find('.tblitem:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');});
$('.tblitem').on('mousedown touchend', function() {ClickSurCase(this);});
}
$(document).ready(ConstruireDefi);
</script> |
