Question

.getAttribute 导致的错误

2012-11-30

1979

javascript dom

所以我有一个页面，其中有一个动态生成的表，看起来像

<table id="enProps">
  <tr>
    <td class="en_US">
      <input readonly="readonly" value="shipbillpayplacerequisition" type="text">
    </td> 
    <td class="en_US">
      <input class="longField" readonly="readonly" value="Ship, Bill &amp; Pay : Place Requisition" type="txt">
    </td>
    <td style="display: none;" class="otherIds">
      <input class="identifier" readonly="readonly" value="shipbillpayplacerequisition" type="text">
    </td> 
    <td class="keyValue">
      <input class="value longField" id="shipbillpayplacerequisition" value="" type="text">
    </td>
  </tr>
</table>

行数可以变化，输入框的值字段中存储的内容也可以变化。我正在尝试用原始 javascript（阅读：没有外部库，例如 JQuery）编写一个简单的脚本，比较两个字段的“值”。

到目前为止，我得到的是

 var table = document.getElementById("enProps");
 var rowCount = table.getElementsByTagName("TR").length;
 var engValue;
 var frenchValue;
 for (var i = 0; i < rowCount; i++){
  var row = table.rows[i];
  var cellCount = row.cells.length;
   for (var j = 0; j < cellCount; j++){
    var cell = row.cells[j];
     if (cell.getAttribute("class") == "en_US"){
       var inputs = cell.getElementsByClassName("longField")[0].getAttribute("value");
     }
   }
 }

每次我尝试运行它时都会出现错误

cell.getElementsByClassName("longField")[0] is undefined

奇怪的是，如果我删除 getAttribute 方法调用并使用 alert 或 console.log 打印输入的值，它会显示正确的元素。我尝试了许多变体，包括使用 .firstChild、.childNodes[0] 和不将我的方法调用串起来。每次我都会收到一个错误，提示 .getAttribute 不是函数或某些内容未定义，并且它总是由该行上的 .getAttribute 调用导致的，更奇怪的是每次在我的选择器上调用 console.log 都会显示相应的输入标签。所以我的问题是 为什么当我尝试使用 .getAttribute 获取输入标签的“value”类的值时会出错？

Answer 1

这是因为您的第一个 <td class="en_US"> 没有带有类 "longField" 的嵌套元素。

您需要确保找到匹配项。

 if (cell.getAttribute("class") == "en_US"){
     var inputs = cell.getElementsByClassName("longField");
     if (inputs.length)
         inputs[0].getAttribute("value");
 }

或者只需从 tr 调用 getElementsByClassName 即可。

for (var i = 0; i < rowCount; i++){
    var inputs = table.rows[i].getElementsByClassName("longField");
    for (var j = 0, len = inputs.length; j < len; j++) {
        inputs[j].getAttribute("value");
    }
}