如何访问行中的每个元素？答案

【问题标题】：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 天，不断更改代码。

标签： javascript

【解决方案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 时不起作用。
我的错，我又更新了帖子，我想你现在会有一个可行的解决方案，不是很漂亮，但可以工作。