Question

我在HTML中有一个表，我想要做的是在其中找到第二列并将其值转换为字符串数组。

稍后我想做一个简单的检查，看看我在一个文本框中输入的值是否已存在于该数组中。但我一直在“不定义”。当我试图获得文本框的.innerHTML或者数组元素的.innerHTML时。我也尝试过.value和.innerText，但我得到的结果相同。

我只能使用普通的javaScript，所以没有jQuery或其他库。我在这里缺少什么？

这是我的表格HTML：

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
    <tbody>
      <tr/>
      <td>07/08/2015</td>
      <td>Test Name</td>
      <td>Raven</td>
      </tr>
      <tr/>
      <td>01/08/2017</td>
      <td>Test Name 2</td>
      <td>PCT</td>
      </tr>
    </tbody>
  </table>

这是用于文本框的HTML：

  <form name="formTestInfo" method="post">
    Name:<br>
    <input type="text" id="tbName" name="tbName">
    <p id="nameVal"></p>
  </form>

这是我的脚本代码：

 var secondCell = document.querySelectorAll('td:nth-child(2)');
 var cellValues = [];
 secondCell.forEach(function(singleCell) {
 cellValues.push(singleCell.innerText);
 });

 for(var i=0; i < cellValues.length ; i++)
 {
     if(document.getElementById("nameVal").innerHTML == cellValues[i].innerHTML)
     {
        var nameVal = "Name already exists in table!";
        validation = false;
     }
 }

我永远不会进入，因为因为值永远不会被找到，所以数组中填入了正确的值。有人看到这里有什么问题吗？

Answer 1

试试这个：

var secondCell = document.querySelectorAll('td:nth-child(2)');
var cellValues = [];
secondCell.forEach(function(singleCell) {
cellValues.push(singleCell.innerText);
});

for(var i=0; i < cellValues.length ; i++)
{
    if(document.getElementById("tbName").value == cellValues[i])
    {
      var nameVal = "Name already exists in table!";
      validation = false;
    }
}

Answer 2

您已在cellValues数组中推送文本字符串

document.getElementById("nameVal").innerHTML == cellValues[i]

所以你应该使用

interface Example<T extends MyClass | OtherClass> {

}

检查表中是否已存在名称。

Answer 3

var secondCell = document.querySelectorAll('td:nth-child(2)');
var nameInput = document.getElementById('tbName');
var cellValues = [];

var validation = true;
var error = "";

secondCell.forEach(function(singleCell) {
  cellValues.push(singleCell.innerText);
});

function testNameInput() {
  for(var i=0; i < cellValues.length ; i++){
    if(this.value == cellValues[i]){
      error = "Name already exists in table!";
      validation = false;
      break;
    }
  }
  if(error){
    alert(error);
    // this.value = ""; // or something
  }
}


nameInput.addEventListener("input", testNameInput);

<table id="results" width="360" border="1">
  <thead>
    <tr>
      <th scope="col" width="120">Date Created</th>
      <th scope="col" width="120">Name</th>
      <th scope="col" width="120">Tests</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>07/08/2015</td>
      <td>Foo</td>
      <td>Raven</td>
    </tr>
    <tr>
      <td>01/08/2017</td>
      <td>Bar</td>
      <td>PCT</td>
    </tr>
  </tbody>
</table> 

<form name="formTestInfo" method="post">
  Name:<br>
  (Try with Foo or Bar)<br>
  <input type="text" id="tbName" name="tbName">
  <p id="nameVal"></p>
</form>

Answer 4

首先，您要检索永远不会起作用的普通字符串的innerHTML。

其次，您不是要与input的值进行比较，而是与下面一行innerHTML的{{1}}进行比较。

<p id="nameVal">

if(document.getElementById("nameVal").innerHTML == cellValues[i].innerHTML)

var secondCell = document.querySelectorAll('td:nth-child(2)');
 var cellValues = [];
 secondCell.forEach(function(singleCell) {
     cellValues.push(singleCell.innerText);   
 });

function validate(){
     for(var i=0; i < cellValues.length ; i++){
         if(document.getElementById("tbName").value == cellValues[i]){
            document.getElementById("nameVal").innerHTML = "Name already exists in table!";
            validation = false;
         }
      }
 }

innerHTML总是返回＆＃39; undefine＆＃39;在javaScript中

4 个答案: