使用基于单选按钮选择的 jquery 将表格单元格添加到行尾
Adding table cells to end of row using jquery based on radio button selections
我有一个(相当大的(形式，我正在构建。在窗体中，有几个单选按钮组(是/否选项(。在阅读了StackOverflow上的几篇相关文章后，我已经能够使用jQuery函数，该函数将在单击单选按钮时对其进行验证，但是我只能使其提供通用alert()。当选择"否"无线电时，我希望发生的是让jQuery向同一表行添加一个新单元格，并显示消息"必须完成"。SystemError 发布的问题"将表格单元格添加到现有表格行，jQuery"似乎可以很好地解决我的问题，如果我为每个单选按钮使用 jQuery 函数。我的问题是，我如何使用一个功能来实现相同的目标？这是我现在尝试添加单元格的表单，该单元格在单选按钮和标签之间添加了单元格。
// 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>");
}
});
});/* 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;
}<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"> </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"> </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"> </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"> </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"> </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"> </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 & 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 ≥ 120°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 & Sanitizer or ≥ 180°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 & 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>任何帮助将不胜感激。
为此，您必须做几件事，如下所示。检查演示 - 小提琴
-
从 HTML 标记中删除
onChange="yesNo(this)"处理程序，因为您要附加常规处理程序。 -
将
if ($(this).prop("value") === "False") {更改为if ($(this).prop("value") === "No") {，因为无线电中没有False值。 -
不要像您那样在输入复选框前面附加一个新
td，而是在包含该复选框的td前面附加一个新$(this).closest('td').prepend("<td>This needs to be completed</td>");
因此，您的常规处理程序如下所示：
$('input[type=radio]').on("change", function() {
if ($(this).prop("value") === "No") {
$(this).closest('td').prepend("<td>This needs to be completed</td>");
}
});
相关文章：
- CSS-若窗口太小，滚动条会出现在“表格”单元格上
- 区分电子表格中的空单元格和0值
- 如何将jQuery/AAJAX结果放入表格单元格
- 在谷歌电子表格中循环单元格
- 使用下拉选择菜单高亮显示一行表格单元格
- 如何通过悬停或点击谷歌电子表格中的单元格来运行自定义功能
- 使用javascript下拉菜单更改表格单元格的颜色
- 表格单元格高度与背景高度匹配
- 在表格单元格中查找超链接
- 谷歌应用程序脚本-onFormSubmit-复制到电子表格中的单元格
- 为什么谷歌应用程序的电子表格setValue函数没有在单元格中设置值
- 数据表 ..如何根据表格的单元格值更改单元格的颜色
- 如何使用单击属性和工具提示动态创建表格单元格，该工具提示将超链接到页面
- 在 DIV 中定位表格单元格
- 单击时将表格单元格从范围更改为输入
- 使用 javascript 为 HTML 表格单元格指定颜色
- 将单击表格单元格重定向到其中的
- JQuery insertAfter(）;移动下一个表格单元格
- 将工作表复制到新的电子表格，将单元格值添加到新电子表格名称的末尾
- 单击并用CTRL+C复制值时高亮显示html表格单元格
