所以我有一个包含动态生成表的页面,看起来像
<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 & 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>
行数可以变化,输入框的值字段存储的内容也可以变化。我正在尝试用vanilla 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错误?
答案 0 :(得分:3)
这是因为您的第一个<td class="en_US">
没有类"longField"
的嵌套元素。
您需要确保找到匹配项。
if (cell.getAttribute("class") == "en_US"){
var inputs = cell.getElementsByClassName("longField");
if (inputs.length)
inputs[0].getAttribute("value");
}
或者只需从getElementsByClassName
致电tr
。
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");
}
}