javascript - Input button - Onclick Color Changer -
i have following html code specific calendar purpose. should perform following function.
1) first user select gender
2) user shall select 1 date
3) selected date should in red color
function focusme(el) { el.style.backgroundcolor = "red"; }<table border="3" cellspacing="3" cellpadding="3"> <tr> <td colspan="7" align="center"><b>first visit calendar</b> </td> </tr> <tr> <td colspan="7" align="center"><i>select gender</i> <select> <option value="male">male</option> <option value="female">female</option> </select> </td> </tr> <tr> <td colspan="7" align="center"><i>select date</i> </td> </tr> <tr> <td align="center">sun</td> <td align="center">mon</td> <td align="center">tue</td> <td align="center">wed</td> <td align="center">thu</td> <td align="center">fri</td> <td align="center">sat</td> </tr> <tr> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center" onclick="focusme(this);"> <input type="button" value="1"> </td> </tr> <tr> <td align="center" onclick="focusme(this);"> <input type="button" value="2"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="3"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="4"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="5"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="6"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="7"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="8"> </td> </tr> <tr> <td align="center" onclick="focusme(this);"> <input type="button" value="9"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="10"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="11"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="12"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="13"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="14"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="15"> </td> </tr> <tr> <td align="center" onclick="focusme(this);"> <input type="button" value="16"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="17"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="18"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="19"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="20"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="21"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="22"> </td> </tr> <tr> <td align="center" onclick="focusme(this);"> <input type="button" value="23" onclick="focusme()" id="demo"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="24"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="25"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="26"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="27"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="28"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="29"> </td> </tr> <tr> <td align="center" onclick="focusme(this);"> <input type="button" value="30"> </td> <td align="center" onclick="focusme(this);"> <input type="button" value="31"> </td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> <td align="center"></td> </tr> </table>
updated snippet following condition:
he/she select date , 1 date selection should possible
it can done logic. consider following logic:
function reset(){ var td = document.getelementsbytagname('td'); (var = 0, length = td.length; < length; i++) { td[i].style.backgroundcolor = 'transparent'; } } function focusme(el) { //removing previous selection reset(); switch (document.getelementbyid('gender').value) { case 'male': if (el.firstchild.value == 3 || el.firstchild.value == 5) el.style.backgroundcolor = "green"; else el.style.backgroundcolor = "red"; break; case 'female': if (el.firstchild.value == 5) el.style.backgroundcolor = "green"; else el.style.backgroundcolor = "red"; break; } }<table border=3 cellspacing=3 cellpadding=3> <tr> <td colspan="7" align=center><b>first visit calendar</b></td> </tr> <tr> <td colspan="7" align=center><i>select gender</i><select id="gender"><option value="male">male</option><option value="female">female</option></select></td> </tr> <tr> <td colspan="7" align=center><i>select date</i></td> </tr> <tr> <td align=center>sun</td> <td align=center>mon</td> <td align=center>tue</td> <td align=center>wed</td> <td align=center>thu</td> <td align=center>fri</td> <td align=center>sat</td> </tr> <tr> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center onclick="focusme(this);"><input type="button" value="1"></td> </tr> <tr> <td align=center onclick="focusme(this);"><input type="button" value="2"></td> <td align=center onclick="focusme(this);"><input type="button" value="3"></td> <td align=center onclick="focusme(this);"><input type="button" value="4"></td> <td align=center onclick="focusme(this);"><input type="button" value="5"></td> <td align=center onclick="focusme(this);"><input type="button" value="6"></td> <td align=center onclick="focusme(this);"><input type="button" value="7"></td> <td align=center onclick="focusme(this);"><input type="button" value="8"></td> </tr> <tr> <td align=center onclick="focusme(this);"><input type="button" value="9"></td> <td align=center onclick="focusme(this);"><input type="button" value="10"></td> <td align=center onclick="focusme(this);"><input type="button" value="11"></td> <td align=center onclick="focusme(this);"><input type="button" value="12"></td> <td align=center onclick="focusme(this);"><input type="button" value="13"></td> <td align=center onclick="focusme(this);"><input type="button" value="14"></td> <td align=center onclick="focusme(this);"><input type="button" value="15"></td> </tr> <tr> <td align=center onclick="focusme(this);"><input type="button" value="16"></td> <td align=center onclick="focusme(this);"><input type="button" value="17"></td> <td align=center onclick="focusme(this);"><input type="button" value="18"></td> <td align=center onclick="focusme(this);"><input type="button" value="19"></td> <td align=center onclick="focusme(this);"><input type="button" value="20"></td> <td align=center onclick="focusme(this);"><input type="button" value="21"></td> <td align=center onclick="focusme(this);"><input type="button" value="22"></td> </tr> <tr> <td align=center onclick="focusme(this);"><input type="button" value="23" onclick="focusme()" id="demo"></td> <td align=center onclick="focusme(this);"><input type="button" value="24"></td> <td align=center onclick="focusme(this);"><input type="button" value="25"></td> <td align=center onclick="focusme(this);"><input type="button" value="26"></td> <td align=center onclick="focusme(this);"><input type="button" value="27"></td> <td align=center onclick="focusme(this);"><input type="button" value="28"></td> <td align=center onclick="focusme(this);"><input type="button" value="29"></td> </tr> <tr> <td align=center onclick="focusme(this);"><input type="button" value="30"></td> <td align=center onclick="focusme(this);"><input type="button" value="31"></td> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center></td> <td align=center></td> </tr> </table>or
Comments
Post a Comment