输入按钮 - Onclick换色器

时间：2015-05-29 14:39:21

标签： javascript jquery html css calendar

我有针对特定日历目的的以下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>

3 个答案:

答案 0 :(得分：3)

更新了以下条件的摘录：

  

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

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

＆＃13;
＆＃13; 
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;
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或

See Jsfiddle in Action

答案 1 :(得分：0)

您可以保留上一个选择并在下一个选择中更改其样式

Data1 = [950 2200 4.5; ...
         1050 2350 5.5; ...
         1025 2500 6; ...
         1075 2600 7; ...
         1000 2700 8];

Data2 = [1000 2650 7.95; ...
         1000 2750 8.16; ...
         1000 2700 9; ...
         1025 3000 10];

vec1 = Data1(:,3);
vec2 = Data2(:,3);
[p,q] = meshgrid(vec1, vec2);
output1 = 0; %initial set

while output1 == 0
sub = [abs(p(:)-q(:))];
[M,I] = min(sub);
IndData1 = floor(I/4);
IndData2 = mod(I,IndData1);

%this basically computes the smallest possible Z 
%Check if it works for condition 2:
checkcolumn1 = abs(Data1(IndData1,1) - Data2(IndData2,1));
checkcolumn2 = abs(Data1(IndData1,2) - Data2(IndData2,2));
if checkcolumn1 < 200 && checkcolumn2 <200
   output1 = Data1(IndData1,:);
   output2 = Data2(IndData2,:);
else
min(sub) = 1000000 %huge high number to basically remove the min
end
end

答案 2 :(得分：0)

稍微修改后几乎达到了解决方案。可以有一些比这更简单的代码，你也可以尝试一下。

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>

相关问题
最新问题