如何用javascript和jQuery替换表中的数据？

Question

到目前为止结果的屏幕截图 这段代码有2个问题。 首先，我想单击“计算平均值”按钮，它将用平均值替换问号； 但它仅适用于第一个学生。 它不适用于第二或第三名学生。 我试图将id =“ question”更改为class，但仍然无法正常工作。 其次，我想单击“找到成绩良好的学生”按钮，对于平均> = 8的学生，它将以红色（字体颜色，而不是背景颜色）突出显示整行中的数据。 我已经做了3天，但仍然无法正常工作。 如果有人可以帮助我进行调试，我会非常感激。

 var fullname = document.getElementById("name"); var classnumber = document.getElementById("classnumber"); var maths = document.getElementById("maths"); var physics = document.getElementById("physics"); var chemistry = document.getElementById("chemistry"); var notice1 = document.getElementById("notice1"); var notice2 = document.getElementById("notice2"); var notice3 = document.getElementById("notice3"); var notice4 = document.getElementById("notice4"); var notice5 = document.getElementById("notice5"); var student = []; function submit() { var isValid = true; if (fullname.value === "") { notice1.innerHTML = "Full name must be entered"; isValid = false; } else { notice1.innerHTML = ""; } if (classnumber.value === "") { notice2.innerHTML = "Class must be entered"; isValid = false; } else { notice2.innerHTML = ""; } if (isNaN(parseInt(maths.value)) === true || maths.value === "" || parseFloat(maths.value) > 10 || parseFloat(maths.value) < 0) { notice3.innerHTML = "Maths score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice3.innerHTML = ""; } if (isNaN(parseInt(physics.value)) === true || physics.value === "" || parseFloat(physics.value) > 10 || parseFloat(physics.value) < 0) { notice4.innerHTML = "Physics score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice4.innerHTML = ""; } if (isNaN(parseInt(chemistry.value)) === true || chemistry.value === "" || parseFloat(chemistry.value) > 10 || parseFloat(chemistry.value) < 0) { notice5.innerHTML = "Chemistry score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice5.innerHTML = ""; } if (isValid === true) { addStudent(fullname.value, maths.value, physics.value, chemistry.value); transfer(); } return false; } function addStudent(fullname, maths, physics, chemistry) { var newStudent = { fullname: fullname, maths: maths, physics: physics, chemistry: chemistry, }; student.push(newStudent); } function round(num, decimals) { var n = Math.pow(10, decimals); return Math.round((n * num).toFixed(decimals)) / n; } function transfer() { var content = document.getElementById("tableData").innerHTML; var i = student.length - 1; content += "<tr>"; content += "<td>" + (i + 1) + " </td>"; content += "<td>" + student[i].fullname + " </td>"; content += "<td>" + student[i].maths + " </td>"; content += "<td>" + student[i].physics + " </td>"; content += "<td>" + student[i].chemistry + " </td>"; content += "<td id='question'>" + "?" + "</td>"; content += "</tr>"; document.getElementById("tableData").innerHTML = content; this.studentmaths = student[i].maths; this.studentphysics = student[i].physics; this.studentchemistry = student[i].chemistry; } function average() { var calculation = round((parseFloat(parseInt(studentmaths) + parseInt(studentphysics) + parseInt(studentchemistry)) / 3), 2); document.getElementById("question").innerHTML = calculation; } $(document).ready(function() { $(goodresult).click(function() { if ($('question').val >= 8) { content.css('color', 'red'); } }); }); 

 td { padding: 5px; } input { border: solid 1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <body> <table> <tr> <td style="width:150px;">Full name</td> <td><input id="name"></td> <td id="notice1"></td> </tr> <tr> <td style="width:150px;">Class</td> <td><input id="classnumber"></td> <td id="notice2"></td> </tr> <tr> <td style="width:150px;">Maths Score</td> <td><input id="maths"></td> <td id="notice3"></td> </tr> <tr> <td style="width:150px;">Physics Score</td> <td><input id="physics"></td> <td id="notice4"></td> </tr> <tr> <td style="width:150px;">Chemistry Score</td> <td><input id="chemistry"></td> <td id="notice5"></td> </tr> </tr> <tr> <td style="width:150px;"></td> <td><button style="border:none; background-color:white;font-size: 15px;" onclick="submit();">Submit</button></td> <td></td> </tr> </table> <table id="tableData" border="1px" cellpadding="0" cellspacing="0"> <tr> <th style="padding:5px 30px">Number</th> <th style="padding:5px 70px">Full Name</th> <th style="padding:5px 30px">Maths</th> <th style="padding:5px 30px">Physics</th> <th style="padding:5px 30px">Chemistry</th> <th style="padding:5px 30px">Average</th> </tr> </table> <br> <button style="float:left;display:block;clear:both;border:none;background-color: white;padding:10px;position: absolute;left:600px" onclick="average();">Calculate the average</button> <br> <br> <button style="float:left; display:block;clear: both;border:none;background-color: white;padding:10px;position: absolute;left:600px" id="goodresult">Find students with good result</button> 

Answer 1

 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="JQuery.js"></script> <style> td {padding:5px;} input {border:solid 1px;} </style> </head> <body> <table> <tr> <td style="width:150px;">Full name</td> <td><input id="name"></td> <td id="notice1"></td> </tr> <tr> <td style="width:150px;">Class</td> <td><input id="classnumber"></td> <td id="notice2"></td> </tr> <tr> <td style="width:150px;">Maths Score</td> <td><input id="maths"></td> <td id="notice3"></td> </tr> <tr> <td style="width:150px;">Physics Score</td> <td><input id="physics"></td> <td id="notice4"></td> </tr> <tr> <td style="width:150px;">Chemistry Score</td> <td><input id="chemistry"></td> <td id="notice5"></td> </tr> </tr> <tr> <td style="width:150px;"></td> <td><button style="border:none; background-color:white;font-size: 15px;" onclick="submit();">Submit</button></td> <td></td> </tr> </table> <table id="tableData" border="1px" cellpadding="0" cellspacing="0"> <tr> <th style="padding:5px 30px">Number</th> <th style="padding:5px 70px">Full Name</th> <th style="padding:5px 30px">Maths</th> <th style="padding:5px 30px">Physics</th> <th style="padding:5px 30px">Chemistry</th> <th style="padding:5px 30px">Average</th> </tr> </table> <br> <button style="float:left; display:block;clear: both;border:none;background-color: white;padding:10px;position: absolute;left:600px" id="goodresult">Find students with good result</button> <script type="text/javascript"> var fullname = document.getElementById("name"); var classnumber = document.getElementById("classnumber"); var maths = document.getElementById("maths"); var physics = document.getElementById("physics"); var chemistry = document.getElementById("chemistry"); var notice1 = document.getElementById("notice1"); var notice2 = document.getElementById("notice2"); var notice3 = document.getElementById("notice3"); var notice4 = document.getElementById("notice4"); var notice5 = document.getElementById("notice5"); var student=[]; function submit () { var isValid = true; if (fullname.value === "") { notice1.innerHTML = "Full name must be entered"; isValid = false; } else { notice1.innerHTML = ""; } if (classnumber.value==="") { notice2.innerHTML="Class must be entered"; isValid = false; } else { notice2.innerHTML = ""; } if (isNaN(parseInt(maths.value))===true || maths.value==="" || parseFloat(maths.value)>10 || parseFloat(maths.value)<0) { notice3.innerHTML="Maths score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice3.innerHTML=""; } if (isNaN(parseInt(physics.value))===true || physics.value==="" || parseFloat(physics.value)>10 || parseFloat(physics.value)<0) { notice4.innerHTML="Physics score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice4.innerHTML=""; } if (isNaN(parseInt(chemistry.value))===true || chemistry.value==="" || parseFloat(chemistry.value)>10 || parseFloat(chemistry.value)<0) { notice5.innerHTML="Chemistry score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice5.innerHTML=""; } if (isValid === true) { addStudent(fullname.value, maths.value, physics.value, chemistry.value); transfer(); } return false; } function addStudent(fullname, maths, physics, chemistry) { var newStudent = { fullname : fullname, maths : maths, physics : physics, chemistry : chemistry, }; student.push(newStudent); } function round(num, decimals) { var n = Math.pow(10, decimals); return Math.round( (n * num).toFixed(decimals) ) / n; } function transfer() { var content = document.getElementById("tableData").innerHTML; var i= student.length-1; var scoreAverage = (parseInt(student[i].maths) + parseInt(student[i].physics) + parseInt(student[i].chemistry)) / 3; console.log(scoreAverage); console.log(parseInt(student[i].maths)); content += "<tr>"; content += "<td>" + (i+1) +" </td>"; content += "<td>" + student[i].fullname +" </td>"; content += "<td>" + student[i].maths +" </td>"; content += "<td>" + student[i].physics +" </td>"; content += "<td>" + student[i].chemistry +" </td>"; content += "<td class='average'>" +scoreAverage+"</td>"; content += "</tr>"; document.getElementById("tableData").innerHTML=content; this.studentmaths=student[i].maths; this.studentphysics=student[i].physics; this.studentchemistry=student[i].chemistry; } function average() { var calculation=round((parseFloat(parseInt(studentmaths) + parseInt(studentphysics) + parseInt(studentchemistry))/3),2); document.getElementById("question").innerHTML=calculation; } $(document).ready(function (){ $('#goodresult').click(function(){ $('.average').each(function() { if(parseInt($(this)[0].innerHTML) >= 8){ $(this).css({'background-color':'red'}); } }); }); }); </script> </body> </html> 

这是一个例子。 注意：访问带有ID的项目时，请使用$（'＃id-of-thing'），我注意到您多次使用$（id-of-thing）时都没有引号或井号。 或没有磅号的$（'id-of-thing'）。 当按其类访问元素时，请使用$（'。class-of-thing'）（在类名之前注意“。”）。

这将计算提交时的平均值，然后在您尝试找到良好分数时正确地突出显示红色的单元格（我可能会建议绿色代表好的分数？绿色通常表示良好，红色通常表示较差）。

要单独访问每个单元格，可以使用$（'。element'）。each（function（）{do stuff}）;。 我在代码段中做了。

Answer 2

在计算平均值时，您将使用id甚至计算函数average of last entered record的average of last entered record 。 因此，我们将首先更新ID，将其更改为class并计算每条记录的平均值，然后将其插入平均值列。

对于第二个问题，我们将遍历所有平均值，然后检查是否大于8，然后像这样添加css ：）

 var fullname = document.getElementById("name"); var classnumber = document.getElementById("classnumber"); var maths = document.getElementById("maths"); var physics = document.getElementById("physics"); var chemistry = document.getElementById("chemistry"); var notice1 = document.getElementById("notice1"); var notice2 = document.getElementById("notice2"); var notice3 = document.getElementById("notice3"); var notice4 = document.getElementById("notice4"); var notice5 = document.getElementById("notice5"); var student = []; function submit() { var isValid = true; if (fullname.value === "") { notice1.innerHTML = "Full name must be entered"; isValid = false; } else { notice1.innerHTML = ""; } if (classnumber.value === "") { notice2.innerHTML = "Class must be entered"; isValid = false; } else { notice2.innerHTML = ""; } if (isNaN(parseInt(maths.value)) === true || maths.value === "" || parseFloat(maths.value) > 10 || parseFloat(maths.value) < 0) { notice3.innerHTML = "Maths score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice3.innerHTML = ""; } if (isNaN(parseInt(physics.value)) === true || physics.value === "" || parseFloat(physics.value) > 10 || parseFloat(physics.value) < 0) { notice4.innerHTML = "Physics score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice4.innerHTML = ""; } if (isNaN(parseInt(chemistry.value)) === true || chemistry.value === "" || parseFloat(chemistry.value) > 10 || parseFloat(chemistry.value) < 0) { notice5.innerHTML = "Chemistry score must be entered and it has to be a number from 0 to 10"; isValid = false; } else { notice5.innerHTML = ""; } if (isValid === true) { addStudent(fullname.value, maths.value, physics.value, chemistry.value); transfer(); } return false; } function addStudent(fullname, maths, physics, chemistry) { var newStudent = { fullname: fullname, maths: maths, physics: physics, chemistry: chemistry, }; student.push(newStudent); } function round(num, decimals) { var n = Math.pow(10, decimals); return Math.round((n * num).toFixed(decimals)) / n; } function transfer() { var content = document.getElementById("tableData").innerHTML; var i = student.length - 1; content += "<tr>"; content += "<td>" + (i + 1) + " </td>"; content += "<td>" + student[i].fullname + " </td>"; content += "<td>" + student[i].maths + " </td>"; content += "<td>" + student[i].physics + " </td>"; content += "<td>" + student[i].chemistry + " </td>"; content += "<td class='question'>" + "?" + "</td>"; content += "</tr>"; document.getElementById("tableData").innerHTML = content; this.studentmaths = student[i].maths; this.studentphysics = student[i].physics; this.studentchemistry = student[i].chemistry; } function average() { var rows = document.getElementById("tableData").rows.length for (var i = 0; i < rows; i++) { var calculation = round((parseFloat(parseInt(student[i].maths) + parseInt(student[i].physics) + parseInt(student[i].chemistry)) / 3), 2); document.getElementsByClassName("question")[i].innerHTML = calculation; } } $(document).ready(function() { $(goodresult).click(function() { var ques = document.getElementsByClassName("question"); for (var i = 0; i < ques.length; i++) { if ($(ques[i]).text() >= 8) { $(ques[i]).parent("tr").css("color","red"); } } }); }); 

 td { padding: 5px; } input { border: solid 1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <body> <table> <tr> <td style="width:150px;">Full name</td> <td><input id="name"></td> <td id="notice1"></td> </tr> <tr> <td style="width:150px;">Class</td> <td><input id="classnumber"></td> <td id="notice2"></td> </tr> <tr> <td style="width:150px;">Maths Score</td> <td><input id="maths"></td> <td id="notice3"></td> </tr> <tr> <td style="width:150px;">Physics Score</td> <td><input id="physics"></td> <td id="notice4"></td> </tr> <tr> <td style="width:150px;">Chemistry Score</td> <td><input id="chemistry"></td> <td id="notice5"></td> </tr> </tr> <tr> <td style="width:150px;"></td> <td><button style="border:none; background-color:white;font-size: 15px;" onclick="submit();">Submit</button></td> <td></td> </tr> </table> <table id="tableData" border="1px" cellpadding="0" cellspacing="0"> <tr> <th style="padding:5px 30px">Number</th> <th style="padding:5px 70px">Full Name</th> <th style="padding:5px 30px">Maths</th> <th style="padding:5px 30px">Physics</th> <th style="padding:5px 30px">Chemistry</th> <th style="padding:5px 30px">Average</th> </tr> </table> <br> <button style="float:left;display:block;clear:both;border:none;background-color: white;padding:10px;position: absolute;left:600px" onclick="average();">Calculate the average</button> <br> <br> <button style="float:left; display:block;clear: both;border:none;background-color: white;padding:10px;position: absolute;left:600px" id="goodresult">Find students with good result</button> 

PS更改在function average()和$(goodresult).click(function() {}) javascript部分完成