2017-10-31 9 views
0

これまでの結果のスクリーンショット enter image description here このコードには2つの問題があります。まず、「平均を計算する」ボタンをクリックして、疑問符を平均値に置き換えます。それは最初の学生のためだけに働く。 2人目または3人目の生徒は働きません。 id = "question"をクラスに変更しようとしましたが、それでも動作しません。次に、「良い結果の生徒を見つける」ボタンをクリックし、平均以上の生徒のために、行全体のデータを赤で強調表示します(背景色ではなくフォントの色)。私はこの3日間で作業しましたが、まだそれを働かせることはできません。誰もがここでテーブルのデータをjavascriptとjQueryに置き換えるにはどうすればいいですか?

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>

+0

で行われます。あなたが投稿をヒットして生徒をテーブルに入れたときの平均を計算するほうが良いのではないでしょうか?それは非常に簡単で、問題を大きく解決します。それは「平均を計算する」が不要なボタンのように思える。あなたの正確なニーズはわかりませんが、これを使用した場合、最初はすべてのデータを必要とし、別のボタンを押して平均を得ることはしません。 –

答えて

0

<!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>

:-)デバッグthis.Thanksに私を助けることができる場合、私は感謝しています例です。注:IDで項目にアクセスするときに$( '#id-of-thing')を使用すると、引用符やシャープ記号のない$(id-of-thing)を複数回使用したことに気付きました。またはポンド記号のない$( 'id-of-thing')。そのクラスで要素にアクセスするときは、$( '。class-of-thing')を使用します(クラス名の前に '。'があることに注意してください)。

これは、提出時の平均を計算し、良いスコアを見つけようとするとセルを赤くハイライトします(良いスコアの場合は緑色を表示しますか?

各セルに個別にアクセスするには、$( '要素')を使用できます。それぞれ(function(){do stuff});私はそのスニペットでやっています。

+0

ご返信ありがとうございます。私は自分のコードの問題を今理解しています:-) – Anthony

0

平均値を計算する際には、idを使用していて、さらに関数内でaverage of last entered recordを計算しています。それで、最初にidをclassに変更し、各レコードの平均を計算し、それをaverageカラムに挿入します。

そして第二の問題のために、私たちは何が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>

P.S.変更はjavacriptの部分でfunction average()$(goodresult).click(function() {})

+0

あなたの助けをありがとう。あなたの答えは、私のコードを変更するためのいくつかのアイデアを与える:-) – Anthony

+0

@Anthonyそれが受け入れて、答えをupvoteしてくれた場合:) –

関連する問題