如何访问行中的每个元素？
Posted
技术标签:
【中文标题】如何访问行中的每个元素？【英文标题】：How do i access each element in the row? 【发布时间】：2017-09-20 23:44:15 【问题描述】：我目前正在研究 GPA 计算器的大学项目，其中默认科目、科目代码和学分默认填写在表格中并且是可编辑的。学生只需填写每个科目的预期分数，然后只需单击提供的按钮即可查看每个科目的成绩和指针。下面的代码工作得很好，因为我还没有完成它的大部分，但是在运行代码时肯定存在问题。问题是显示每个科目的成绩和指针的按钮只在表格的第一行起作用。这意味着它只在表格的第一行更新一个科目的成绩和指针。我已经为你提供了运行程序的 html 文件和 js 文件，让你更了解我想说的话。
JS Fiddle 示例： 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：当我使用 notepad++ 时它工作得非常好，但它似乎不适用于 js fiddle 示例。
【问题讨论】：
如果您要共享完整代码，请务必创建一个可行的示例。 问题是你的 id 不是唯一的，所以它总是指向第一个 :eq(0) 元素 @JYoThI 是的，我知道这一点。但是我不知道如何将 2 个 id 传递给一个函数，有人说我应该使用 rowindex 检查我正在编辑的行和列，直到今天我仍然无法弄清楚。我已经为此工作了 2 天，不断更改代码。 【参考方案1】：您不能让 HTMLElements 具有相同的 ID
你的id="grade" 和id="point" 是错误的。
您应该使用唯一 ID（如行数）或主题 ID（如 id="grade_0" 或 id="grade_SCV122"）生成它，并将此变量传递给您的函数，例如。
编辑：
你可以这样做： 将您的按钮 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
更新
//replace the 2 getElementsById lines by that
line.children[4].innerHTML = grade;
line.children[5].innerHTML = gpaPoint;
【讨论】：
是的，我知道这一点。但是我不知道如何将 2 个 id 传递给一个函数，有人说我应该使用 rowindex 检查我正在编辑的行和列，直到今天我仍然无法弄清楚。我已经为此工作了 2 天，不断更改代码。 不使用jQuery还有其他方法吗？因为它不包含在教学大纲中，我无法理解它的作用 我的回答有两种解决方案，纯JS和jQuery，你可以选择你想要的，这两种都可以。 我使用了纯 JS，它可以工作，但成绩和 gpa 只在第一行更新（就像原始代码一样）。这种情况只有在我使用相同的 id 来表示成绩和分数时才有效，但在我使用不同的 id 时不起作用。 我的错，我又更新了帖子，我想你现在会有一个可行的解决方案，不是很漂亮，但可以工作。以上是关于如何访问行中的每个元素？的主要内容，如果未能解决你的问题，请参考以下文章