我如何訪問行中的每個元素？

我目前正在研究GPA計算器上的大學項目，默認科目，科目代碼和學分默認填寫在表中，並且是可編輯的。學生只需填寫每個科目的預期分數，然後只需點擊一個提供的按鈕即可查看每個科目的成績和指針。下面的代碼可以正常工作，因爲我還沒有完成大部分工作，但運行代碼時肯定存在問題。問題在於用於顯示每個主題的等級和指針的按鈕僅適用於表的第一行。這意味着它僅在表格的第一行更新主題的等級和指針。我爲您提供了html文件和js文件來運行程序，並讓您更瞭解我想說的內容。我如何訪問行中的每個元素？

JS小提琴例如：https://jsfiddle.net/onyhL6mb/

.html文件：

<html> 
<title> GPA Calculator </title> 
<head> 

<script src="test_asg3.js"> 
</script> 
</head> 

<body> 
<form name="gpaCalc"> 
<table id="myTable" border="1"; width: "100%"> 
<tr> 
    <th>Code 
    <th>Subject 
    <th>Credit 
    <th>Expected Mark 
    <th>Grades 
    <th>GPA 
    <th> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCJ524"></td> 
<td><input type="text" name="subject" value="Object-Oriented Programming"></td> 
<td><input type="text" name="credit" value="4"></td> 
<td><input type="text" id="marks" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCJ011"></td> 
<td><input type="text" name="subject" value="Software Engineering"></td> 
<td><input type="text" name="credit" value="3"></td> 
<td><input type="text" id="marks1" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCR234"></td> 
<td><input type="text" name="subject" value="Operating System"></td> 
<td><input type="text" name="credit" value="3"></td> 
<td><input type="text" id="marks2" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="SCV122"></td> 
<td><input type="text" name="subject" value="Web Programming"></td> 
<td><input type="text" name="credit" value="3"></td> 
<td><input type="text" id="marks3" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="ENG222"></td> 
<td><input type="text" name="subject" value="Advanced Academic English Skills"></td> 
<td><input type="text" name="credit" value="2"></td> 
<td><input type="text" id="marks4" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 

<tr> 
<td><input type="text" name="code" value="BIO683"></td> 
<td><input type="text" name="subject" value="Structure and Functions of Proteins"></td> 
<td><input type="text" name="credit" value="3"></td> 
<td><input type="text" id="marks5" oninput="getMarks(this.id)"></td> 
<td id = "grade"></td> 
<td id = "points"></td> 
<td><input type="button" value="Show Grades" onclick="displayGrades()" /></td> 
</tr> 
</table> 
</form> 

<br><input type="button" value="Add Subject" onclick="addRow('myTable')" /> 
<!--<input type="button" value="Calculate GPA" onclick="gpacalc()" /> --> 
<!---<br><input type="submit" value="Calculate GPA" onclick="xxxxxx('yyyy')" />---> 
</body> 
</html>

js文件

function addRow(myTable) 
{ 
    var table = document.getElementById("myTable"); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    cell1.appendChild(element1); 

    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    cell2.appendChild(element2); 

    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    cell3.appendChild(element3); 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input"); 
    cell4.appendChild(element4); 

    var cell5 = row.insertCell(4); 
    var element5 = document.createElement(""); 
    cell5.appendChild(element5); 

    var cell6 = row.insertCell(5); 
    var element6 = document.createElement(""); 
    cell6.appendChild(element6); 

    var cell7 = row.insertCell(6); 
    var element7 = document.createElement(""); 
    cell7.appendChild(element7); 
} 

var x; 

function getMarks(id) 
{ 
    x = document.getElementById(id).value; 
} 

function displayGrades() 
{ 
     var grade; 
     var gpaPoint; 

     if(x >= 90 && x<=100) 
     { 
      grade = "A+"; 
      gpaPoint = 4.00; 
     } 

     else if(x >=80 && x< 90) 
     { 
      grade = "A"; 
      gpaPoint = 4.00; 
     } 

     else if(x >=75 && x< 80) 
     { 
      grade = "A-"; 
      gpaPoint = 3.67; 
     } 

     else if(x >=70 && x< 75) 
     { 
      grade = "B+"; 
      gpaPoint = 3.33; 
     } 

     else if(x >=65 && x< 70) 
     { 
      grade = "B"; 
      gpaPoint = 3.00; 
     } 

     else if(x >=60 && x< 65) 
     { 
      grade = "B-"; 
      gpaPoint = 2.67; 
     } 

     else if(x >=55 && x< 60) 
     { 
      grade = "C+"; 
      gpaPoint = 2.33; 
     } 

     else if(x >=50 && x< 55) 
     { 
      grade = "C"; 
      gpaPoint = 2.00; 
     } 

     else if(x >=45 && x< 50) 
     { 
      grade = "C-"; 
      gpaPoint = 1.67; 
     } 

     else if(x >=40 && x< 45) 
     { 
      grade = "D"; 
      gpaPoint = 1.00; 
     } 

     else if(x < 40) 
     { 
      grade = "F"; 
      gpaPoint = 0.00; 
     } 

     document.getElementById("grade").innerHTML = grade; 
     document.getElementById("points").innerHTML = gpaPoint; 
    }

我已經發布了同樣的問題在我的其他帳戶這裏和更新該代碼使用其他用戶建議的答案。然而，由於我發佈的問題從其他用戶那裏收到「不良評論」，因此我不能在該帳戶上發佈另一個問題，因此達到了發佈另一個問題的限制。希望這次能有人提出一個想法來幫助這個項目。

P/S：當我使用記事本++時它工作得很好，但它似乎不適用於js小提琴示例。

來源

2017-04-24 beginner211216

如果您要共享完整的代碼，請始終制作一個工作示例。 –

問題是你的ID不是唯一的，所以它始終指向第一：EQ（0）元 – JYoThI

@JYoThI \t \t \t 是的，我知道這一點。但我不知道如何將2個id傳遞給一個函數，有人說我應該檢查使用rowindex編輯哪一行和哪一列，直到今天仍然無法解決它。我一直在努力工作2天，並不斷更改代碼。 – beginner211216

您不能有HTMLElements具有相同的ID 您的id="grade"和id="point"是錯誤的。您應該使用唯一ID生成它，例如id="grade_0"或id="grade_SCV122"這樣的主題的行數或ID，並將此變量傳遞給您的函數。

編輯：

你可以這樣來做：的onclick更改按鈕，這

displayGrades(this.parentElement.parentElement)

而且你的腳本這樣

function displayGrades(line) 
{ 
    var grade; 
    var gpaPoint; 
    if(line && line.children && line.children.length > 0){ 
     //Pure javascript 
     grade = line.children[0].children[0].value; 
     gpaPoint = line.children[3].children[0].value; 
     //jQuery 
     grade = $(line).find("input[name=code]").val(); 
     gpaPoint = $(line).find("input[name=marks]").val();//And add the name marks to your input marks 
    }

UPDATE開始時

//replace the 2 getElementsById lines by that 
line.children[4].innerHTML = grade; 
line.children[5].innerHTML = gpaPoint;

來源

2017-04-24 10:35:06

是的，我意識到這一點。但我不知道如何將2個id傳遞給一個函數，有人說我應該檢查使用rowindex編輯哪一行和哪一列，直到今天仍然無法解決它。我一直在努力工作2天，並不斷更改代碼。 – beginner211216

有沒有其他方法沒有使用jQuery？因爲它沒有包含在課程大綱中，我不明白它在做什麼 – beginner211216

在我的答案中有兩個解決方案，純JS和jQuery，你可以選擇你想要的一個，它們兩個都可以工作。 –

我如何訪問行中的每個元素？

回答

相關問題