如何在 javascript 中访问 HTML 数组对象？

Question

很抱歉提出简单的问题。我真的是 Javascript 的初学者。我需要在我的 javascript 中访问我的 HTML 数组表单对象，但我不知道该怎么做。

目标是在javascript中触发警报，以便浏览器根据javascript中的条件显示消息。这是我的代码：

checkScore = function()
 {
 //I don't know how to access array in HTML Form, so I just pretend it like this :
  
 var student = document.getElementByName('row[i][student]').value;
 var math = document.getElementByName('row[i][math]').value; 
 var physics = document.getElementByName('row[i][physics]').value; 

if (parseInt(math) >= 80 ) {
alert(student + " ,You are good at mathematic");
}

if (parseInt(physics) >= 80 ){
alert(student + " ,You are good at physics");
}
 
student_score.row[i][otherinfo].focus();
student_score.row[i][otherinfo].select();
}

<h2>HTML Forms</h2>

<form name="student_score" action="/action_page.php">

<table border=1>

<thead>

<td>Student</td>
<td>Math Score</td>
<td>Physics Score</td>
<td>Other info</td>
</thead>

<tbody>
<tr>
<td><input type="text" name="row[1][student]"></td>
<td><input type="number" name="row[1][math]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="number" name="row[1][physics]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="text" name="row[1][otherinfo]"></td>
</tr>

<tr>
<td><input type="text" name="row[2][student]"></td>
<td><input type="number" name="row[2][math]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="number" name="row[2][physics]" onblur="checkScore()" min="0" max="100"></td>
<td><input type="text" name="row[2][otherinfo]"></td>             
</tr>

<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>

</tbody>
</table>
</form> 

<p>If you click the "Submit" button, it will save the data.</p>

Answer 1

我们将在这里利用一些东西来简化这一点。

第一个是Event Listeners，这会从您的 HTML 中删除所有 javascript。如果表格最终通过 javascript 添加了行，它还可以使其更加动态且更容易重构。

接下来是parentNode，我们用它来查找包含被点击元素的tr；

然后我们使用querySelectorAll 和attribute selector 从上面的tr 中获取我们的目标字段。

/*This does the work*/
function checkScore(event) {
  //Get the element that triggered the blur
  var element = event.target;
  //Get our ancestor row (the parent of the parent);
  var row = element.parentNode.parentNode;
  //Use an attribute selector to get our infor from the row
  var student = row.querySelector("[name*='[student]']").value;
  var math = row.querySelector("[name*='[math]']").value;
  var physics = row.querySelector("[name*='[physics]']").value;
  var otherField = row.querySelector("[name*='[otherinfo]']");

  if (parseInt(math, 10) >= 80) {
    alert(student + " ,You are good at mathematic");
  }

  if (parseInt(physics, 10) >= 80) {
    alert(student + " ,You are good at physics");
  }

  otherField.focus();
  otherField.select();
}

/*Wire Up the event listener*/
var targetElements = document.querySelectorAll("input[name*='math'], input[name*='physics']");
for (var i = 0; i < targetElements.length; i++) {
  targetElements[i].addEventListener("blur", checkScore);
}

<h2>HTML Forms</h2>

<form name="student_score" action="/action_page.php">

  <table border=1>

    <thead>
      <tr>
        <td>Student</td>
        <td>Math Score</td>
        <td>Physics Score</td>
        <td>Other info</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><input type="text" name="row[1][student]" class='student'></td>
        <td><input type="number" name="row[1][math]" min="0" max="100"></td>
        <td><input type="number" name="row[1][physics]" min="0" max="100"></td>
        <td><input type="text" name="row[1][otherinfo]"></td>
      </tr>

      <tr>
        <td><input type="text" name="row1[2][student]"></td>
        <td><input type="number" name="row[2][math]" min="0" max="100"></td>
        <td><input type="number" name="row[2][physics]" min="0" max="100"></td>
        <td><input type="text" name="row[2][otherinfo]"></td>
      </tr>

      <tr>
        <td>
          <input type="submit" value="Submit">
        </td>
      </tr>

    </tbody>
  </table>
</form>

Answer 2

嗯，它完全按照你的代码行（因为你说你不想过多地改变代码）。

<h2>HTML Forms</h2>

<form name="student_score" action="/action_page.php">

<table border=1>

<thead>

<td>Student</td>
<td>Math Score</td>
<td>Physics Score</td>
<td>Other info</td>
</thead>

<tbody>
<tr>
<td><input type="text" name="row[1][student]"></td>
<td><input type="number" name="row[1][math]" onblur="checkScore(this)" min="0" max="100"></td>
<td><input type="number" name="row[1][physics]" onblur="checkScore(this)" min="0" max="100"></td>
<td><input type="text" name="row[1][otherinfo]"></td>
</tr>

<tr>
<td><input type="text" name="row1[2][student]"></td>
<td><input type="number" name="row[2][math]" onblur="checkScore(this)" min="0" max="100"></td>
<td><input type="number" name="row[2][physics]" onblur="checkScore(this)" min="0" max="100"></td>
<td><input type="text" name="row[2][otherinfo]"></td>             
</tr>

<tr>
<td>
<input type="submit" value="Submit">
</td>
</tr>

</tbody>
</table>
</form> 

JavaScript [使用@Jon P 代码的一部分再次编辑，查询选择器确实更加动态，并且您请求的“其他”字段的值被注释掉]

//pass element to function, in html, only add [this] in parenteses
checkScore = function (element) {
    //Get our ancestor row (the parent of the parent);
    var row = element.parentNode.parentNode;
    //Use an attribute selector to get our infor from the row
    var student = row.querySelector("[name*='[student]']").value;
    var math = row.querySelector("[name*='[math]']").value;
    var physics = row.querySelector("[name*='[physics]']").value;
    var other = row.querySelector("[name*='[otherinfo]']");

    if (parseInt(math) >= 80) {
        //other.value = student + " ,You are good at mathematic";
        alert(student + " ,You are good at mathematic");
    }

    if (parseInt(physics) >= 80) {
        //other.value = student + " ,You are good at physics";
        alert(student + " ,You are good at physics");
    }
    otherField.focus();
    otherField.select();
}

经过测试:)，对不起我的英语！

Answer 3

试试看，没测试过

var form = document.getElementsByName("student_score")[0];
var students = form.getElementsByTagName("tr");

for(var i = 0; i < students.length; i++){
    var student = students[i].childnodes[0].value;
    var math = students[i].childnodes[1].value;
    var physics = students[i].childnodes[2].value;
    if (parseInt(math) >= 80 ) {
    alert(student + " ,You are good at mathematic");
    }

    if (parseInt(physics) >= 80 ){
    alert(student + " ,You are good at physics");
    }
}