条件格式表jquery
我有9个技能的测验，1个技能有2个问题 - 共18个问题 因此，当ppl提交测验时，结果表将返回4个范围（Rangea，b，c，d）。所以根据得分，我想强调每个技能的行
结果表
$(document).ready(function($) {
var sum = 0;
var numberQA = 2
$('.skillA:checkbox').click(function() {
sum = 0;
$('.skillA:checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
average = sum / numberQA;
$('#totalSkillA').html(average);
});
$('tbody tr td:not(":third")').each(
function() {
var rangeA = 1,
rangeB = 2,
rangeC = 3,
rangeD = 4,
score = $(#totalSkillA).value();
if (score < rangeA) {
$(#totalSkillA).addClass('avg');
}
else if (score < rangeB && score >= rangeA) {
$(#totalSkillA).addClass('avg');
}
else if (score >= rangeB && score < rangeC) {
$(#totalSkillA).addClass('avg');
}
else if (score >= rangeC && score <= rangeD) {
$(#totalSkillA).addClass('avg');
}
});
例如，我有3个问题，Q1,2,3的值为1,2,3，我做了这些值的平均值。所以现在平均=得分。我在代码中有4个范围，所以我想如果分数在RangeA中，则单元格将突出显示
如果分数在rangeA中，我希望表格突出显示该部分
请帮帮我
2 个答案:
答案 0 :(得分：0)
更新您的js代码。所有行都存在问题，例如$（＆＃39;＃totalSkillA＆＃39）。addClass（＆＃39;平均＆＃39）;单引号
$(document).ready(function($) {
var sum = 0;
var numberQA = 2
$('.skillA:checkbox').click(function() {
sum = 0;
$('.skillA:checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
average = sum / numberQA;
$('#totalSkillA').html(average);
});
$('tbody tr td:not( ":third")').each( function() {
var rangeA = 1,
rangeB = 2,
rangeC = 3,
rangeD = 4,
score = $('#totalSkillA').value();
if (score < rangeA) {
$('#totalSkillA').addClass('avg');
}
else if (score < rangeB && score >= rangeA) {
$('#totalSkillA').addClass('avg');
}
else if (score >= rangeB && score < rangeC) {
$('#totalSkillA').addClass('avg');
}
else if (score >= rangeC && score <= rangeD) {
$('#totalSkillA').addClass('avg');
}
});
});
答案 1 :(得分：0)
$(document).ready(function($) {
var sum = 0;
var numberQA = 2
$('.skillA:checkbox').click(function() {
sum = 0;
$('.skillA:checkbox:checked').each(function(idx, elm) {
sum += parseInt(elm.value, 10);
});
average = sum / numberQA;
$('#totalSkillA').html(average);
});
$('tbody tr td:not(":third")').each(
function() {
var rangeA = 1,
rangeB = 2,
rangeC = 3,
rangeD = 4,
score = $(#totalSkillA).value();
if (score < rangeA) {
$(#totalSkillA).addClass('avg');
}
else if (score < rangeB && score >= rangeA) {
$(#totalSkillA).addClass('avg');
}
else if (score >= rangeB && score < rangeC) {
$(#totalSkillA).addClass('avg');
}
else if (score >= rangeC && score <= rangeD) {
$(#totalSkillA).addClass('avg');
}
});@charset "UTF-8";
body, td, th, input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.avg {
background-color: #060;
}
.liveSample {
background-color: #FFFFCC;
color: black;
padding: 4px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid #000000;
}
.demoDiv {
background-color: #CCCCCC;
width: 2000px;
}
.highlited {
background-color: #FFFFCC;
color: #000000;
}
.grayBG {
background-color: #CCCCCC;
}
pre {
font-family: "Courier New", Courier, monospace;
background-color: #F0F7FE;
padding: 5px;
overflow: auto;
font-size: 1.1em;
margin-left: 10px;
margin-right: 10px;
border: 1px solid #CCCCCC;
}
h3 {
background-color: #F3F3F3;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-size: 100%;
line-height: 150%;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
h4{
color: #000099;
font-variant: small-caps;
font-size:120%;
}
td, th{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
th {
background-color: #F3F3F3;
vertical-align: top;
}
a {
text-decoration: none;
}<form name="readiness" method="post">
Navigate:
<a href="#" onclick="sp5.showFirstPanel(); return false;">First</a> |
<a href="#" onclick="sp5.showPreviousPanel(); return false;">Previous</a> |
<a href="#" onclick="sp5.showNextPanel(); return false;">Next</a> |
<a href="#" onclick="sp5.showLastPanel(); return false;">Last</a>
</p>
<p> </p>
<div id="example5" class="SlidingPanels" tabindex="0">
<div class="SlidingPanelsContentGroup">
<div class="SlidingPanelsContent p1">
<div class="demoDiv" style="background-color: #E6E6E6">
<table width="650">
<!-- Skill A -->
<!-- Question 1 -->
<tr>
<td width="400">
<h4>1. My need to take this course now is:</h4>
<p><input class="skillA" type="checkbox" value="4" name="q1A" id="q1" onclick="if(this.checked) {document.readiness.q1B.checked=false;document.readiness.q1C.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> A. High. I need it immediately for a specific job goal.</p>
<p><input class="skillA" type="checkbox" value="3" name="q1B" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1C.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> B. Moderate. I could take it on campus later or substitute another course.</p>
<p><input class="skillA" type="checkbox" value="2" name="q1C" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1B.checked=false;document.readiness.q1D.checked=false;} showHide('feedback1', this);"/> C. Low. It could be postponed. </p>
<p><input class="skillA" type="checkbox" value="1" name="q1D" id="q1" onclick="if(this.checked) {document.readiness.q1A.checked=false;document.readiness.q1B.checked=false;document.readiness.q1C.checked=false;} showHide('feedback1', this);"/> D. Low. It could be postponed. </p>
</td>
<td width="250">
<div id="feedback1" style="visibility:hidden">
<strong>Why this is important:<br></strong> Generally, the more urgently you need to take an online course, the more motivated you'll be, and therefore more successful. If you have a strong reason for taking an online course, like a job goal, you're more motivated to spend the time to complete it.
</div>
</td>
</tr>
<!-- End question 1 -->
<!-- Question 2 -->
<tr>
<td width="400">
<h4>2. Considering my work and personal schedule, the amount of time I have to work on an online course is:</h4>
<p><input class="skillA" type="checkbox" value="4" name="q2A" id="q2" onclick="if(this.checked) {document.readiness.q2B.checked=false;document.readiness.q2C.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />A. More than for a traditional course at the college.</p>
<p><input class="skillA" type="checkbox" value="3" name="q2B" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2C.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />B. The same as for a traditional course at the college.</p>
<p><input class="skillA" type="checkbox" value="2" name="q2C" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2B.checked=false;document.readiness.q2D.checked=false;} showHide('feedback2', this);" />C. Less than for a traditional course at the college.</p>
<p><input class="skillA" type="checkbox" value="1" name="q2D" id="q2" onclick="if(this.checked) {document.readiness.q2A.checked=false;document.readiness.q2B.checked=false;document.readiness.q2C.checked=false;} showHide('feedback2', this);" />D. Less than for a traditional course at the college.</p>
</td>
<td width="250">
<div id="feedback2" style="visibility:hidden">
<strong>Why this is important:<br></strong> Allowing more study time while you're taking an online course is a good idea, partly because it may take a while to get used to the way it works, and partly because there's generally more reading and writing to do in online courses. Of course, when you work on your course is up to you.
</div>
</td>
</tr>
</div>
<!-- End question 2 -->
<!-- End Skill A -->
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？