輸入按鈕 - Onclick換色器

-1

我對特定的日曆目的具有以下HTML代碼。它應該執行以下功能。輸入按鈕 - Onclick換色器

1）首先，用戶將選擇性別
2）用戶應選擇只有一個日期
3）所選日期應爲紅色

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 your Gender</i> 
 
     <select> 
 
     <option value="Male">Male</option> 
 
     <option value="Female">Female</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="7" align="center"><i>Select your 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>

來源

2015-05-29 Gokul Ravikumar

你有，你所取得的成就至今什麼問題？ –

我可以將選中的按鈕變成紅色，但即使我點擊多個選項，一切都會變紅。一次只有一個細胞應該是紅色的。 –

您的JavaScript沒有條件檢查。你有試過寫什麼嗎？ – j08691

更新了以下條件的片段：

他/她將選擇日期並且只有一個日期選擇應該是可能

它可以用一些邏輯完成。請考慮以下邏輯：

function reset(){ 
 
    var td = document.getElementsByTagName('td'); 
 
    for (var i = 0, length = td.length; i < 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 your 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 your 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>

或

See Jsfiddle in Action

來源

2015-05-29 14:48:50 Manwal

「他/她將選擇日期並且只有一個日期選擇應該是可能的」狀態的更新演示，其中用戶只能選擇一個日期。 – Manwal

但是，它仍然沒有按照條件工作......！但JS中給出的條件是正確的。 –

是的@GokulRavikumar我相信在這裏你可以展現你的努力。或者我可以幫助你。 – Manwal

可以可能保持前面的選擇和改變下一個選擇它的風格

var previous=null; 
function focusMe(el) { 
    if(previous!=null){ 
    previous.style.backgroundColor = "white"; 
    } 
    el.style.backgroundColor = "red"; 
    previous=el; 
}

來源

2015-05-29 14:53:34

阿爾姆經過微小的修改，ost達到了解決方案。可以有一些比這更少的代碼，你也可以嘗試一下。

function reset() { 
 
     var td = document.getElementsByTagName('td'); 
 
     for (var i = 0, length = td.length; i < length; i++) { 
 
      td[i].style.backgroundColor = 'transparent'; 
 
     } 
 
    } 
 

 
    function focusMe(value) { 
 
     reset(); 
 
     var text = ""; 
 
     var x = value; 
 
     var j = parseInt(x) + 2; 
 
     var k = parseInt(x) + 4; 
 
     var l = parseInt(x) + 5; 
 
     var m = parseInt(x) + 7; 
 
     var gen = document.getElementById('gender').value; 
 
     if (gen == 'Male'){    
 
       text += "You can Visit us from " + j + " to " + k + "<br>"; 
 
       document.getElementById("demo").innerHTML = text; 
 
     } 
 
     else{ 
 
       text += "You can Visit us from " + l + " to " + m + "<br>"; 
 
       document.getElementById("demo").innerHTML = text; 
 
     } 
 

 
    }

<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 your 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 your 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="this.style.backgroundColor = 'Red';"><input type="button" value="1" onclick="focusMe(this.value)"></TD> 
 
</TR> 
 
<TR> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="2" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="3" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="4" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="5" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="6" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="7" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="8" onclick="focusMe(this.value)"></TD> 
 
</TR> 
 
<TR> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="9" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="10" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="11" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="12" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="13" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="14" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="15" onclick="focusMe(this.value)"></TD> 
 
</TR> 
 
<TR> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="16" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="17" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="18" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="19" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="20" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="21" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="22"></TD> 
 
</TR> 
 
<TR> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="23" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="24" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="25" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="26" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="27" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="28" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="29" onclick="focusMe(this.value)"></TD> 
 
</TR> 
 
<TR> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="30" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center onclick="this.style.backgroundColor = 'Red';"><input type="button" value="31" onclick="focusMe(this.value)"></TD> 
 
<TD ALIGN=center></TD> 
 
<TD ALIGN=center></TD> 
 
<TD ALIGN=center></TD> 
 
<TD ALIGN=center></TD> 
 
<TD ALIGN=center></TD> 
 

 
</TR> 
 
</TABLE> 
 
<p id="demo"></p>

來源

2015-05-30 05:38:15

輸入按鈕 - Onclick換色器

回答

相關問題