使用基于单选按钮选择的jquery将表格单元格添加到行尾

时间：2016-02-07 00:59:13

标签： javascript jquery html

我正在建造一个（相当大）的形式。在表单中有几个单选按钮组（是/否选择）。通过阅读StackOverflow上的几个相关帖子后，我已经能够使用jQuery函数，该函数将在单击时验证单选按钮，但是我只能使它给出通用alert()。我想在＆＃34; No＆＃34;选择无线电是为了让jQuery将一个新的单元格添加到同一个表格行，并带有一条消息＆＃34;这必须完成＆＃34;。 SystemError＆＃34; Add table cell to existing table row, jQuery＆＃34;发布的问题如果我要为每个单选按钮做一个jQuery函数，似乎可以很好地解决我的问题。我的问题是，如何使用一个功能为所有单选按钮实现同样的目标？这是我现在的表格，我试图添加单元格，在单选按钮和标签之间添加单元格。

＆＃13;
＆＃13; 
// JavaScript Document
"use strict";
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 coldValidate(elem) {
  var x, text;
  x = +elem.value;
  if (isNaN(x) || x < 33 || x > 40) {
    text = "Temp Out of Tolerance";
  } else {
    text = " ";
  }
  elem.parentNode.nextElementSibling.innerHTML = text;
}

function freezValidate(elem) {
  var x, text;
  x = +elem.value;
  if (isNaN(x) || x < -10 || x > 10) {
    text = "Temp Out of Tolerance";
  } else {
    text = " ";
  }
  elem.parentNode.nextElementSibling.innerHTML = text;
}

function hotValidate(elem) {
  var x, text;
  x = +elem.value;
  if (isNaN(x) || x < 165) {
    text = "Temp Out of Tolerance";
  } else {
    text = " ";
  }
  elem.parentNode.nextElementSibling.innerHTML = text;
}

$(document).ready(function() {
  $("#storenumber").click(function salad() {
    var storenumber = $("#storenumber").val();
    switch (storenumber) {
      case "011169":
      case "008181":
        $("#frig1, #frig2, #frig3, #saladbar, #barcheese").removeClass("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":
        $("#frig1, #frig2, #frig3, #saladbar, #barcheese").addClass("hide");
        break;
    }
  });
  $('input[type=radio]').on("change", function() {
    if ($(this).prop("value") === "False") {
      $(this).prepend("<td>This needs to be completed</td>");

    }
  });
});
＆＃13; 
/* CSS Document */

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: 480px;
}
.noborder {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
body {
  background-color: #061BFF;
}
.nobordererror {
  border: none;
  background-color: #061BFF;
  color: #FFFFFF;
}
.hide {
  display: none;
}
＆＃13; 
<body>
  <form>
    <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">
              <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="10" 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="6" 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 value="True">Yes</label>
            <label>
              <input name="approve" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="expired" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="raw" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="fifo" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="produce" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="ppm" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="hotwater" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="soap" type="radio" required value="False">No</label>
          </td>
        </tr>
        <tr>
          <td class="left"><span class="required">*</span>Chemicals stored Correctly:</td>
          <td>
            <label>
              <input name="chem" type="radio" required value="True">Yes</label>
            <label>
              <input name="chem" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="illteam" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="wash" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="sinks" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="hair" type="radio" required value="False">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 value="True">Yes</label>
            <label>
              <input name="pest" type="radio" required value="False">No</label>
          </td>
        </tr>
      </table>
    </section>
    <button type="submit">Submit</button>
  </form>

</body>
＆＃13;
＆＃13;
＆＃13;

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：1)

你必须为此做几件事，如下所示。查看演示 - Fiddle

  1. 从html标记中删除onChange="yesNo(this)"处理程序，因为您附加了一般处理程序。

  2. 将if ($(this).prop("value") === "False") {更改为if ($(this).prop("value") === "No") {，因为您的无线电中没有False个值。

  3. 将新的td不像您那样添加到输入复选框，而是添加到包含该复选框的td：$(this).closest('td').prepend("<td>This needs to be completed</td>");

    4. 所以你的通用处理程序看起来像：

    $('input[type=radio]').on("change", function() {
    if ($(this).prop("value") === "No") {
        $(this).closest('td').prepend("<td>This needs to be completed</td>");
    }
});
相关问题
最新问题