输入按钮

输入按钮

关注
发信
关注(28)粉丝(399)

javascript - 输入按钮-Onclick换色器

我有以下用于特定日历目的的HTML代码。它应该执行以下功能。

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>

最佳答案

更新了以下条件的代码段：


  他/她将选择日期，并且只能选择一个日期
  可能


可以用一些逻辑来完成。考虑以下逻辑：



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

关于javascript - 输入按钮-Onclick换色器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30532433/

10-09 18:15
Powered by LMLPHP ©2024 输入按钮 0.045305