Hogyan lehet JavaScript-ben a táblázat egy celláját beszínezni?
válasza:var x = document.getElementById("mytable").getElementsByTagName("td");
x[0].innerHTML = "i want to change my cell color";
x[0].style.backgroundColor = "yellow";
Ha számítástechnikával akarsz foglalkozni, muszáj lesz kicsit belefolynod az angolba és a gugli használatába, mert nagyon megkönnyíti majd az életed.
válasza:<style>
#TablaID td { min-width: 80px; height: 80px; text-align: center; vertical-align: middle; }
#TablaID td { transition: all 300ms ease-in-out; } /* Ez pici átmenetet csinál a színváltásnak */
</style>
<table id="TablaID">
<tr>
<td>1.</td>
<td>2.</td>
<td>3.</td>
</tr>
<tr>
<td colspan="2">4-5.</td>
<td>6.</td>
</tr>
<tr>
<td>7.</td>
<td>8.</td>
<td>9.</td>
</tr>
<tr>
<td>10.</td>
<td colspan="2">11-12.</td>
</tr>
</table>
<script>
function MyFunction() {
var MyColors = ["#FF0000","#FFFF00","#00FF00","#00FFFF","#0000FF","#FF00FF","#CCCCCC"]
var MyTable = document.getElementById('TablaID');
var MyTD = MyTable.getElementsByTagName('td');
for(var a=0;a<MyTD.length;a++) {
MyTD[a].style.backgroundColor=MyColors[Math.floor(Math.random() * MyColors.length)];
}
}
setInterval('MyFunction()',1000); /* Funkciónkat lefuttatja másodpercenként */
</script>
válasza:<!doctype html>
<html>
<head>
<title>JS</title>
<script type="text/javascript">
window.onload = function(){
var t = setInterval(function(){colorChange()},1000);
}
function colorChange(){
var el = document.getElementsByTagName('td');
for(var i = 0; i<el.length; i++){
el[i].style.backgroundColor = "#"+Math.floor(Math.random()*1000);
}
}
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
color: #333;
}
#content{
width: 940px;
height: auto;
background-color: white;
padding: 10px;
margin: 10px auto;
}
#table{
width: 500px;
height: auto;
padding: 10px;
margin: 0 auto;
}
tr{
width: 25%;
height: 20px;
text-align: center;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="content">
<table id="table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
<tr>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
<tr>
<td>m</td>
<td>n</td>
<td>o</td>
<td>p</td>
</tr>
</table>
</div>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!