如何在javascript中遍历子对象? [英] How do I loop through children objects in javascript?
问题描述
我在函数中有以下代码:
I have this code in a function:
tableFields = tableFields.children;
for (item in tableFields) {
// Do stuff
}
根据tableFields的console.log,我得到一个数组,就像我想做的那样.循环中的项的console.log返回未定义.我该怎么做才能遍历tableFields并将每个对象插入表中?
According to a console.log of tableFields, I am getting an array back as I assume I need to do. A console.log of item within the loops returns undefined. What do I have to do to loop through tableFields and insert each object into a table?
tableFields的控制台日志:
console log of tableFields:
HTMLCollection[label, input, label, input 25, label, input, input, input Remove]
0
label
1
input
2
label
3
input 25
4
label
5
input
6
input
7
input Remove
description[]
input
hours[]
input
invoice_number
input
getlength
8
rate[]
input 25
item
item()
iterator
iterator()
namedItem
namedItem()
__proto__
HTMLCollectionPrototype { item=item(), namedItem=namedItem(), iterator=iterator()}
这是到目前为止的整个代码部分:
Here is the entire section of code as I have so far:
$this->title("Test");
$this->defaultMenu();
$select = "";
$names = Customer::getNames();
foreach ($names as $id => $name) {
$select .= '<option value="'.$id.'"';
if ($this->customerid == $id) $select .= ' selected ';
$select .= '>'.$name.'</option>';
}
$form = '
<script type="text/javascript">
var counter = 0;
function isEven(int){
int = Number(int);
return (int%2 == 0);
}
function moreLabor() {
var table = document.getElementById("editTable");
var tableFields = document.getElementById("readroot");
tableFields = tableFields.children;
console.log(tableFields);
for (item in tableFields) {
if (isEven(counter)) {
var tableRow = table.insertRow(-1);
var label = tableRow.insertCell(-1);
console.log(tableFields[item]);
label.appendChild(tableFields[item]);
} else {
var field = tableRow.insertCell(-1);
field.innerHTML = item.innerHTML;
}
counter++;
}
console.log();
var insertHere = document.getElementById("writeroot");
}
window.onload = function(){
document.getElementById(\'moreLabor\').onclick = function(){ moreLabor(); }
moreLabor();
}
</script>
<div id="readroot" style="display: none">
<tr>
<td><label for="hours">Hours:</label></td>
<td><input type="text" name="hours[]" value="" /></td>
</tr>
<tr>
<td><label for="rate">Rate:</label></td>
<td><input type="text" name="rate[]" value="25" /></td>
</tr>
<tr>
<td><label for="description">Description:</label></td>
<td><input type="text" name="description[]" value="" /></td>
</tr>
<input type="hidden" name="invoice_number" value="'.$this->number.'" />
<tr>
<td><input type="button" value="Remove"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td>
</tr>
</div>
<form method="POST" class="invoice" id="edit">
<table id="editTable">
<tr>
<td><label>Work Order Number:</label></td>
<td><input type="text" name="number" value="'.$this->number.'"/></td>
</tr>
<tr>
<td><label>Customer:</label></td>
<td><select name="customerid">'.$select.'</select></td>
</tr>
<span id="writeroot"></span>
<tr>
<td><input type="button" id="moreLabor" value="Add labor"/></td>
<td><input type="submit" name="Save" value="Save" /></td>
</tr>';
if (!is_null($this->id)) {
$form .= '<input type="hidden" name="id" value="'.$this->id.'"/>';
}
$form .= '</table></form>';
$this->component($form);
推荐答案
诀窍是 DOM Element.children
属性不是数组,而是一个类似于数组的集合,该集合具有长度并且可以像数组一样被索引,但不是数组:
The trick is that the DOM Element.children
attribute is not an array but an array-like collection which has length and can be indexed like an array, but it is not an array:
var children = tableFields.children;
for (var i = 0; i < children.length; i++) {
var tableChild = children[i];
// Do stuff
}
顺便说一句,通常,使用基本的for循环而不是for-in-loop遍历数组是一种更好的做法.
Incidentally, in general it is a better practice to iterate over an array using a basic for-loop instead of a for-in-loop.
这篇关于如何在javascript中遍历子对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!