PDA

View Full Version : changing the color of a table cell

Antoniohawk
12-14-2002, 06:29 PM
I want the color of a table cell "<td>" to change color according to an amount submitted by the user. I would have a form and an input box. If the number entered in the box was greater than 100, then the background color of the cell would be green, if it was less than 100, then the bg would red. How can i do this?
joeframbach
12-14-2002, 06:39 PM
what if the user inputs 100?

since you didnt post any code you already have... ill pseudocode it.

<script language=javascript>
function go()
{
var choice=textbox.value
if choice<100
td.bgColor="red";
else if choice>100
td.bgColor="green"
else
alert("please input a number")
}
</script>

<body>
<table>
..........
</table>
<input type=text>
<input type=button onClick="go()">
</body>
Antoniohawk
12-14-2002, 06:57 PM
Can u please fill in the parts with the question marks?

<script>
function tdcolor(number)
{
var num = number;

if (num < 100)
{
?
}

if (num > 100)
{
?
}
</script>

<form name="form">
Enter in a number<input name="number">
<input type="button" onClick="tdcolor(this.number)">
</form>

<table name="fred">
<tr>
<td height="10" width="50" name="sally"></td>
</tr>
</table>
joeframbach
12-14-2002, 07:02 PM
i did a little 'thinking'...

function tdcolor(num)
{
document.fred.sally.bgColor=(num<100)?"red":"green"
}
chrismiceli
12-14-2002, 07:03 PM
<script>
function tdcolor(number)
{
var num = number;

if (num < 100)
{
document.tablename.style.background-color = "red";
}

if (num > 100)
{
document.tablename.style.bacckground-color = "green";
}
</script>

<form name="form">
Enter in a number<input name="number">
<input type="button" onClick="tdcolor(this.number)">
</form>

<table name="fred">
<tr>
<td height="10" width="50" name="sally"></td>
</tr>
</table>
chrismiceli
12-14-2002, 07:03 PM
post were almost simultaneous, wow!
Antoniohawk
12-14-2002, 07:06 PM
can u put all the stuff that needs to be on the page together for me? (script, form, and table)
joeframbach
12-14-2002, 07:06 PM
i appologize i really dont know much on DOM, i always use ids and call them with document.getElementById()...

so that line might not work
joeframbach
12-14-2002, 07:09 PM
i hope my 56k is faster than what chrismiceli has...
<script>
function tdcolor(num)
{
document.fred.sally.bgColor=(num<100)?"red":"green"
}
</script>

<body>
<form name="form">
Enter in a number<input name="number">
<input type="button" onClick="tdcolor(this.number)">
</form>

<table name="fred" border>
<tr>
<td height="10" width="50" name="sally"></td>
</tr>
</table>
</body>
Antoniohawk
12-14-2002, 07:43 PM
sry guys neither of urs works, can any1 else help me?
joeframbach
12-14-2002, 07:48 PM
<script>
function tdcolor()
{
var num=document.getElementById("number").value;
document.getElementById("sally").bgColor=(num<100)?"red":"green"
}
</script>

<body>
Enter in a number<input id="number">
<input type="button" onClick="tdcolor()">
<table>
<tr>
<td height="10" width="50" id="sally"></td>
</tr>
</table>
</body>
Antoniohawk
12-14-2002, 08:50 PM
Very nice joe! That works great. There is only one problem. I should have posted exactly what i wanted, i just posted something general because I thought i could take your code and implement it into my script. The problem is that i cant. Well this is going to be fun, my script is hard to explain. Well here is the page: http://www.avidgamers.com/RuneRaiders/prayercalc.html

um and here is the code for the page, please see if u can figure it out, but i here to answer questions.

<html>
<head>
<style>
INPUT {
FONT-FAMILY: Verdana, Helvetica;
FONT-SIZE: 10px;
border: 1px green solid;
background-color: #000000;
color: #ffffff;
}
</style>
<script language=javascript>
function calcPray(prayer1,prayer2,prayeroutput,prayeroutput2)
{

var lvl = new Array(99)
lvl[0]=0;
lvl[1]=0;
lvl[2]=83;
lvl[3]=174;
lvl[4]=276;
lvl[5]=388;
lvl[6]=512;
lvl[7]=650;
lvl[8]=801;
lvl[9]=969;
lvl[10]=1154;
lvl[11]=1358;
lvl[12]=1584;
lvl[13]=1833;
lvl[14]=2107;
lvl[15]=2411;
lvl[16]=2746;
lvl[17]=3115;
lvl[18]=3523;
lvl[19]=3973;
lvl[20]=4470;
lvl[21]=5018;
lvl[22]=5624;
lvl[23]=6291;
lvl[24]=7028;
lvl[25]=7842;
lvl[26]=8740;
lvl[27]=9730;
lvl[28]=10824;
lvl[29]=12031;
lvl[30]=13364;
lvl[31]=14833;
lvl[32]=16456;
lvl[33]=18249;
lvl[34]=20224;
lvl[35]=22406;
lvl[36]=24815;
lvl[37]=27473;
lvl[38]=30408;
lvl[39]=33648;
lvl[40]=37224;
lvl[41]=41171;
lvl[42]=45529;
lvl[43]=50339;
lvl[44]=55649;
lvl[45]=61512;
lvl[46]=67983;
lvl[47]=75127;
lvl[48]=83014;
lvl[49]=91720;
lvl[50]=101333;
lvl[51]=111945;
lvl[52]=123660;
lvl[53]=136594;
lvl[54]=150872;
lvl[55]=166636;
lvl[56]=184040;
lvl[57]=203254;
lvl[58]=224466;
lvl[59]=247886;
lvl[60]=273742;
lvl[61]=302288;
lvl[62]=333804;
lvl[63]=368599;
lvl[64]=407015;
lvl[65]=449428;
lvl[66]=496254;
lvl[67]=547953;
lvl[68]=605032;
lvl[69]=668051;
lvl[70]=737627;
lvl[71]=814445;
lvl[72]=899257;
lvl[73]=992895;
lvl[74]=1093728;
lvl[75]=1210421;
lvl[76]=1336443;
lvl[77]=1475581;
lvl[78]=1629200;
lvl[79]=1798808;
lvl[80]=1986068;
lvl[81]=2192818;
lvl[82]=2421087;
lvl[83]=2673114;
lvl[84]=2951373;
lvl[85]=3258594;
lvl[86]=3597793;
lvl[87]=3972294;
lvl[88]=3485774;
lvl[89]=5346332;
lvl[90]=5902831;
lvl[91]=6517253;
lvl[92]=7195629;
lvl[93]=7195629;
lvl[94]=7944614;
lvl[95]=8771558;
lvl[96]=9684577;
lvl[97]=10692629;
lvl[98]=11805606;
lvl[99]=13034431;

if (prayerform.enter[0].checked)
{
var num1 = lvl[prayer1.value];
}

if (prayerform.enter[1].checked)
{
var num1 = parseInt(prayer1.value,10)
}

var num2 = parseInt(prayer2.value,10);

if (isNaN(num1) || num1<0){
alert("Please enter a positive number for field 1.");
prayer1.focus();
return;
}
if (isNaN(num2) || num2<0){
alert("Please enter a positive number for field 2.");
prayer2.focus();
return;
}

prayeroutput.value = Math.ceil((num1-num2)/3.75);
prayeroutput2.value = Math.ceil((num1-num2)/12.5);

function lvlColor()
{
if (prayer2 < lvl[4])
{
document.getElementById("lvl4").bgColor = "red";
}

if (prayer2 < lvl[7])
{
document.getElementById("lvl7").bgColor = "red";
}

if (prayer2 < lvl[10])
{
document.getElementById("lvl10").bgColor = "red";
}

if (prayer2 < lvl[13])
{
document.getElementById("lvl13").bgColor = "red";
}

if (prayer2 < lvl[16])
{
document.getElementById("lvl16").bgColor = "red";
}

if (prayer2 < lvl[19])
{
document.getElementById("lvl19").bgColor = "red";
}

if (prayer2 < lvl[22])
{
document.getElementById("lvl22").bgColor = "red";
}

if (prayer2 < lvl[25])
{
document.getElementById("lvl25").bgColor = "red";
}

if (prayer2 < lvl[28])
{
document.getElementById("lvl28").bgColor = "red";
}

if (prayer2 < lvl[31])
{
document.getElementById("lvl31").bgColor = "red";
}

if (prayer2 < lvl[34])
{
document.getElementById("lvl34").bgColor = "red";
}

if (prayer2 < lvl[37])
{
document.getElementById("lvl37").bgColor = "red";
}

if (prayer2 < lvl[40])
{
document.getElementById("lvl40").bgColor = "red";
}

if (prayer2 >= lvl[4])
{
document.getElementById("lvl4").bgColor = "green";
}

if (prayer2 >= lvl[7])
{
document.getElementById("lvl7").bgColor = "green";
}
}

}
</script>
</head>
<body>
<table cellspacing="2" cellpadding="0">
<th colspan="2"><center><b>Prayer</b></center></th>
<tr>
<td bgcolor="gray" style="font-size:15px; color: white; padding-left: 10px; padding-right: 10px; padding-top: 10px; border:1px #000000 solid" colspan="2">
<form name="prayerform">
Enter in your Prayer experience: <input name="prayer2">
<br>
Enter in wanted lvl<input type="radio" name="enter" value="lvl"> or exact exp.<input type="radio" name="enter" value="exactexp">: <input name="prayer1">
<br>
<center><input type="button" value="Submit" onclick="calcPray(this.form.prayer1,this.form.prayer2,this.form.prayeroutput,this.form.prayeroutput2)" onSubmit="lvlColor()"></center>
<br>
</td>
</tr>
<tr>
<td bgcolor="gray" style="font-size:15px; color: white; padding-left: 10px; padding-right: 10px; padding-top: 10px; border:1px #000000 solid" colspan="2">
You have to bury <input name="prayeroutput"> small bones!
<br>
You have to bury <input name="prayeroutput2"> big bones!
</form>
</td>
</tr>
</table>
<table style="border:1px green solid; padding-left: 10px; padding-right: 10px;" width="500">
<tr>
<td><b>Level<b></td>
<td><b>Prayer<b></td>
</tr>
<tr>
<td>1</td>
<td bgcolor="green">Thick Skin</td>
</tr>
<tr>
<td>4</td>
<td id="lvl4">Burst of Strength</td>
</tr>
<tr>
<td>7</td>
<td id="lvl7">Clarity of Thought</td>
</tr>
<tr>
<td>10</td>
<td id="lvl10">Rock Skin</td>
</tr>
<tr>
<td>13</td>
<td id="lvl13">Superhuman Strength</td>
</tr>
<tr>
<td>16</td>
<td id="lvl16">Improved Reflexes</td>
</tr>
<tr>
<td>19</td>
<td id="lvl19">Rapid Restore</td>
</tr>
<tr>
<td>22</td>
<td id="lvl22">Rapid Heal</td>
</tr>
<tr>
<td>25</td>
<td id="lvl25">Protect Items</td>
</tr>
<tr>
<td>28</td>
<td id="lvl28">Steel Skin</td>
</tr>
<tr>
<td>31</td>
<td id="lvl31">Ultimate Strength</td>
</tr>
<tr>
<td>34</td>
<td id="lvl34">Incredible Reflexes</td>
</tr>
<tr>
<td>37</td>
<td id="lvl37">Paralyze Monster</td>
</tr>
<tr>
<td>40</td>
<td id="lvl40">Protect From Missiles</td>
</tr>
</table>
<br>
<br>
<center>Created by Antoniohawk</center>
<br><center>Feel free to use the calculators. If you wish to put it on your website, please give credit to the creator.</center>
<br>
</body>
</html>

THX for ur help in advance