如何根据选择菜单选项使用jQuery更改多个表行

时间:2016-02-01 01:42:20

标签: javascript jquery html

如果已经提出这个问题,请告诉我在哪里可以找到答案

我正在尝试创建一个表单,根据下拉菜单中的选择,它将显示不同的表行。我在使用JavaScript时已成功完成此操作,但我现在正尝试从JavaScript迁移到jQuery,并且我很难确定要使用的正确函数。

这是一个带有JavaScript编码的JSFiddle文件

var myVar = setInterval(myTimer, 1000);

function myTimer() {
  var d = new Date();
  var dd = d.getDay();
  var day1;
  var day2;
  var d_d = d.getMonth();
  switch (d_d) {
    case 0:
      day2 = "January";
      break;
    case 1:
      day2 = "February";
      break;
    case 2:
      day2 = "March";
      break;
    case 3:
      day2 = "April";
      break;
    case 4:
      day2 = "May";
      break;
    case 5:
      day2 = "June";
      break;
    case 6:
      day2 = "July";
      break;
    case 7:
      day2 = "August";
      break;
    case 8:
      day2 = "September";
      break;
    case 9:
      day2 = "October";
      break;
    case 10:
      day2 = "Novmber";
      break;
    case 11:
      day2 = "December";
      break;
  }
  switch (dd) {
    case 0:
      day1 = "Sunday";
      break;
    case 1:
      day1 = "Monday";
      break;
    case 2:
      day1 = "Tuesday";
      break;
    case 3:
      day1 = "Wednesday";
      break;
    case 4:
      day1 = "Thursday";
      break;
    case 5:
      day1 = "Friday";
      break;
    case 6:
      day1 = "Saterday";
      break;
  }
  document.getElementById("day").value = day1;
  document.getElementById("time").value = d.toLocaleTimeString();
  document.getElementById("date").value = day2 + " " + d.getDate();
}

function salad() {
  var storenumber = document.getElementById("storenumber");
  switch (storenumber.value) {
    case "011169":
    case "008181":
      document.getElementById("frig1").classList.remove("hide");
      document.getElementById("frig2").classList.remove("hide");
      document.getElementById("frig3").classList.remove("hide");
      document.getElementById("saladbar").classList.remove("hide");
      document.getElementById("barcheese").classList.remove("hide");
      break;
    case "010576":
    case "010324":
    case "008615":
    case "009150":
    case "014640":
    case "010684":
    case "011168":
    case "014215":
    case "008179":
    case "008339":
    case "008668":
    case "031574":
      document.getElementById("frig1").classList.add("hide");
      document.getElementById("frig2").classList.add("hide");
      document.getElementById("frig3").classList.add("hide");
      document.getElementById("saladbar").classList.add("hide");
      document.getElementById("barcheese").classList.add("hide");
      break;
  }
}
header {
  text-align: center;
}
td {
  border: solid thin #000000;
  background-color: #FF0000;
}
th {
  border: solid thin #000000;
  width: 300px;
  background-color: #FF0000;
}
.required {
  color: #FFF500;
}
.left {
  text-align: right;
  width: 500px;
}
.noborder {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
body {
  background-color: #061BFF;
}
.nobordererror {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
.hide {
  display: none;
}
<body>
  <section>
    <table cellspacing="0px">
      <tr>
        <th colspan="2" class="noborder">
          <h1>Food Safety Checklist</h1>
        </th>
      </tr>
      <tr>
        <th colspan="2" class="noborder"><span class="required">*</span>=Required feilds</th>
      </tr>
      <!-- Identification Information section -->
      <tr>
        <td class="left"><span class="required">*</span>Store Number:</td>
        <td>
          <select id="storenumber" name="storenumber" required title="Please select your store ID number" onChange="salad()">
            <option value="">Select Store Number</option>
            <option value="010576">010576</option>
            <option value="011169">011169</option>
            <option value="008181">008181</option>
            <option value="010324">010324</option>
            <option value="008615">008615</option>
            <option value="009150">009150</option>
            <option value="014640">014640</option>
            <option value="010684">010684</option>
            <option value="011168">011168</option>
            <option value="014215">014215</option>
            <option value="008179">008179</option>
            <option value="008339">008339</option>
            <option value="008668">008668</option>
            <option value="031574">031574</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Day:</td>
        <td>
          <input type="text" size="7" name="day" id="day" title="Enter current Day" required>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Date:</td>
        <td>
          <input type="text" size="9" name="date" id="date" required title="Please enter current date">
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Time:</td>
        <td>
          <input type="text" size="9" name="time" id="time" title="Enter current time" required>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Initials:</td>
        <td>
          <input name="initial" type="text" required id="initial" maxlength="2" size="3" title="Enter User ID">
        </td>
      </tr>
      <tr>
        <td colspan="2" class="noborder">&nbsp;</td>
      </tr>
      <!-- Thermometer Calibration -->
      <tr>
        <th colspan="2" class="noborder">Thermometer</th>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Thermometers Calibrated:</td>
        <td>
          <label>
            <input name="cal" type="radio" required id="cal_0" value="Yes" onChange="yesNo(this)">Yes</label>
          <label>
            <input name="cal" type="radio" required id="cal_1" value="No" onChange="yesNo(this)">No</label>
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td colspan="2" class="noborder">&nbsp;</td>
      </tr>
      <!-- Cold Temps -->
      <tr>
        <th colspan="2" class="noborder">Cold Temperature Managment</th>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Maketable Air Temp (bottom):</td>
        <td>
          <input name="bottomair" type="text" required id="bottomair" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Maketable Air Temp (top):</td>
        <td>
          <input name="topair" type="text" required id="topair" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Maketable Meat Temp:</td>
        <td>
          <input name="meat" type="text" required id="meat" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Maketable Cheese Temp:</td>
        <td>
          <input name="cheese" type="text" required id="cheese" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Walk In Cooler Temp:</td>
        <td>
          <input name="walkin" type="text" required id="walkin" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr id="frig1" class="hide">
        <td class="left"><span class="required">*</span>Refrigeration Unit #1:</td>
        <td>
          <input name="refrig1" type="text" required id="refrig1" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr id="frig2" class="hide">
        <td class="left"><span class="required">*</span>Refrigeration Unit #2:</td>
        <td>
          <input name="refrig2" type="text" required id="refrig2" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr id="frig3" class="hide">
        <td class="left"><span class="required">*</span>Refrigeration Unit #3:</td>
        <td>
          <input name="refrig3" type="text" required id="refrig3" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Freezer Unit #1:</td>
        <td>
          <input name="freez1" type="text" required id="freez1" size="3" onChange="freezValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Freezer Unit #2:</td>
        <td>
          <input name="freez2" type="text" required id="freez2" size="3" onChange="freezValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Freezer Unit #3:</td>
        <td>
          <input name="freez3" type="text" required id="freez3" size="3" onChange="freezValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr id="saladbar" class="hide">
        <td class="left"><span class="required">*</span>Salad Bar Air Temp:</td>
        <td>
          <input name="saladair" type="text" required id="saladair" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr id="barcheese" class="hide">
        <td class="left"><span class="required">*</span>Salad Bar Cheese Temp:</td>
        <td>
          <input name="saladcheese" type="text" required id="saladcheese" size="3" onChange="coldValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="noborder" colspan="2">&nbsp;</td>
      </tr>
      <!-- Hot Temp section -->
      <tr>
        <th class="noborder" colspan="2">Hot Temperature Management</th>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Wing Temp:</td>
        <td>
          <input name="wing" type="text" required id="wing" size="3" onChange="hotValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Meat Sauce/Soups Temp:</td>
        <td>
          <input name="sauce" type="text" required id="sauce" size="3" onChange="hotValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Hot Hold Timing System:</td>
        <td>
          <label>
            <input name="hothold" type="radio" required id="hothold_0" value="Yes">Yes</label>
          <label>
            <input name="hothold" type="radio" required id="hothold_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="noborder" colspan="2">&nbsp;</td>
      </tr>
      <!-- Oven Managment -->
      <tr>
        <th class="noborder" colspan="2">Oven Management</th>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Pizza Tepmp:</td>
        <td>
          <input name="pizza" type="text" required id="pizza" size="3" onChange="hotValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Pasta Temp:</td>
        <td>
          <input name="pasta" type="text" required id="pasta" size="3" onChange="hotValidate(this)">
        </td>
        <td class="noborder"></td>
      </tr>
      <tr>
        <td class="noborder" colspan="2">&nbsp;</td>
      </tr>
      <!-- Oven speed and temp only needsto be done once a week -->
      <tr>
        <th class="noborder" colspan="2">Oven Temperatures and Speeds</th>
      </tr>
      <tr>
        <td class="left">Top Oven:</td>
        <td>Temp:
          <input name="toptemp" type="text" id="toptemp" maxlength="3" size="4">
          <br/>Speed:
          <input name="topspeed" type="text" id="topspeed" maxlength="3" size="4">
        </td>
      </tr>
      <tr>
        <td class="left">Center Oven:</td>
        <td>Temp:
          <input name="centertemp" type="text" id="centertemp" maxlength="3" size="4">
          <br/>Speed:
          <input name="centerspeed" type="text" id="centerspeed" maxlength="3" size="4">
        </td>
      </tr>
      <tr>
        <td class="left">Bottom Oven:</td>
        <td>Temp:
          <input name="bottomtemp" type="text" id="bottomtemp" maxlength="3" size="4">
          <br/>Speed:
          <input name="bottomspeed" type="text" id="bottomspeed" maxlength="3" size="4">
        </td>
      </tr>
      <tr>
        <td class="noborder" colspan="2">&nbsp;</td>
      </tr>
      <!-- This is the Yes/No section of the checklist Food Handling Section -->
      <tr>
        <th class="noborder" colspan="2">Food Hangling</th>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Only approved Ingredients Used:</td>
        <td>
          <label>
            <input name="approve" type="radio" required id="approve_0" value="Yes">Yes</label>
          <label>
            <input name="approve" type="radio" required id="approve_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>No Spoiled/Expired food present:</td>
        <td>
          <label>
            <input name="expired" type="radio" required id="expired_0" value="Yes">Yes</label>
          <label>
            <input name="expired" type="radio" required id="expired_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Wing Street Raw Zone Process Followed:</td>
        <td>
          <label>
            <input name="raw" type="radio" required id="raw_0" value="Yes">Yes</label>
          <label>
            <input name="raw" type="radio" required id="raw_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Foodis Correcctly Date/Labeled &amp; FIFO is followed:</td>
        <td>
          <label>
            <input name="fifo" type="radio" required id="fifo_0" value="Yes">Yes</label>
          <label>
            <input name="fifo" type="radio" required id="fifo_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Whole Produce is Washed:</td>
        <td>
          <label>
            <input name="produce" type="radio" required id="produce_0" value="Yes">Yes</label>
          <label>
            <input name="produce" type="radio" required id="produce_1" value="No">No</label>
        </td>
      </tr>
      <!-- Sanitation Section -->
      <tr>
        <td class="left"><span class="required">*</span>Sanitizer is at Correct PPM:</td>
        <td>
          <label>
            <input name="ppm" type="radio" required id="ppm_0" value="Yes">Yes</label>
          <label>
            <input name="ppm" type="radio" required id="ppm_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Hot Water &ge; 120&deg;F at 3-Comp. Sink:</td>
        <td>
          <label>
            <input name="hotwater" type="radio" required id="hotwater_0" value="Yes">Yes</label>
          <label>
            <input name="hotwater" type="radio" required id="hotwater_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Dishwasher has Soap &amp; Sanitizer or &ge; 180&deg;F Water:</td>
        <td>
          <label>
            <input name="soap" type="radio" required id="soap_0" value="Yes">Yes</label>
          <label>
            <input name="soap" type="radio" required id="soap_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
        <td>
          <label>
            <input name="chem" type="radio" required id="chem_0" value="Yes">Yes</label>
          <label>
            <input name="chem" type="radio" required id="chem_1" value="No">No</label>
        </td>
      </tr>
      <!-- Health & Hygiene Section -->
      <tr>
        <th class="left"><span class="required">*</span>No Ill Team Members Working:</th>
        <td>
          <label>
            <input name="illteam" type="radio" required id="illteam_0" value="Yes">Yes</label>
          <label>
            <input name="illteam" type="radio" required id="illteam_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Correct Hand Washing Procedures Followed:</td>
        <td>
          <label>
            <input name="wash" type="radio" required id="wash_0" value="Yes">Yes</label>
          <label>
            <input name="wash" type="radio" required id="wash_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Hand Sinks (Including Restrooms) are Stocked, Accessible &amp; Used Properly:</td>
        <td>
          <label>
            <input name="sinks" type="radio" required id="sinks_0" value="Yes">Yes</label>
          <label>
            <input name="sink" type="radio" required id="sinks_1" value="No">No</label>
        </td>
      </tr>
      <tr>
        <td class="left"><span class="required">*</span>Hair Restraints Worn Correctly:</td>
        <td>
          <label>
            <input name="hair" type="radio" required id="hair_0" value="Yes">Yes</label>
          <label>
            <input name="hair" type="radio" required id="hair_1" value="No">No</label>
        </td>
      </tr>
      <!-- Pest Management Section -->
      <tr>
        <td class="left"><span class="required">*</span>Pest Infestation or Activity is not Present and All Traps Placed Correctly:</td>
        <td>
          <label>
            <input name="pest" type="radio" required id="pest_0" value="Yes">Yes</label>
          <label>
            <input name="pest" type="radio" required id="pest_1" value="No">No</label>
        </td>
      </tr>
    </table>
  </section>
</body>

同样,jquery函数的目标应该是根据所选的“商店ID”隐藏/显示几个表行。

提前感谢您提供任何帮助

1 个答案:

答案 0 :(得分:0)

这个jQuery版本:

document.getElementById("frig1").classList.add("hide");

$("#frig1").hide();

要显示元素,请使用

$("#frig1").show();

如果您想隐藏多个元素,可以使用:

$("#frig1, #frig2").hide();