Как мне прокручивать дочерние объекты в javascript?

Question

У меня есть этот код в функции:

tableFields = tableFields.children; 
for (item in tableFields) { 
    // Do stuff 
} 

Согласно console.log из Поля таблицы, я получаю массив обратно, как я предполагаю, что мне нужно сделать. Консоль.log элемента внутри циклов возвращает undefined. Что мне нужно сделать, чтобы циклически перебирать 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()} 

Вот весь раздел кода, как я до сих пор:

$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); 

Answer 1

Хитрость заключается в том, что the DOM Element.children attribute не является массивом но array- как коллекция, которая имеет длину и может быть проиндексирована как массив, но это не массив:

var children = tableFields.children; 
for (var i = 0; i < children.length; i++) { 
    var tableChild = children[i]; 
    // Do stuff 
} 

Кстати, в общем случае лучше использовать итерацию по массиву с использованием базового цикла for вместо цикла for-in-loop.

Answer 2

если tableFields является массивом, вы можете перебрать элементы следующим образом:

for (item in tableFields); { 
    console.log(tableFields[item]); 
} 

кстати я видел логическую ошибку в you'r code.just удалить ; с конца для цикла

прямо здесь:

for (item in tableFields); {.

это заставит you'r петлю сделать только nothing.and следующая строка будет выполняться только один раз:

// Do stuff 

Answer 3

обратной совместимости версии (IE9 +) является

var parent = document.querySelector(selector); 
Array.prototype.forEach.call(parent.children, function(child, index){ 
    // Do stuff 
}); 

ES6 путь

const parent = document.querySelector(selector); 
Array.from(parent.children).forEach((child, index) => { 
    // Do stuff 
});