遍歷指定DIV標記內的所有表單域

Question

我需要能夠遍歷指定DIV標記內的所有表單域。基本上，任何給定的DIV標籤都可以有多個表單域（這很容易解析），但它也可以包含任意數量的表，甚至額外的DIV標籤（增加額外的層次分層）。

我已經寫了一個基本函數，通過父節點的每個直接後代（在這種情況下，DIV標記），並清除它的值。這部分工作正常。問題在於，如果孩子（孫輩）屬於自己的孩子，那就解決孩子的問題。它捲起了無限循環。

在這種情況下，我需要能夠找到DIV標籤「panSomePanel」中的所有表單字段，其中將包括一些直接子項（txtTextField1），但也包括嵌套的TABLE對象和/或嵌套的DIV中的一些孫子標籤（radRadioButton，DESC_txtTextArea）。

下面是一個簡單的DIV及其內容：

<DIV id="panSomePanel"> 

    <INPUT name="txtTextField1" type="text" id="txtTextField1" size="10"/><BR><BR> 
    <TABLE id="tblRadioButtons" border="0"> 
     <TR> 
      <TD>      
       <INPUT id="radRadioButton_0" type="radio" name="radRadioButton" value="1" /><LABEL for="radRadioButton_0">Value 1</LABEL> 
      </TD> 
      <TD>      
       <INPUT id="radRadioButton_5" type="radio" name="radRadioButton" value="23" /><LABEL for="radRadioButton_5">Value 23</LABEL> 
      </TD> 
     </TR> 
     <TR> 
      <TD>      
       <INPUT id="radRadioButton_1" type="radio" name="radRadioButton" value="2" /><LABEL for="radRadioButton_1">Value 2</LABEL> 
      </TD> 
      <TD>      
       <INPUT id="radRadioButton_6" type="radio" name="radRadioButton" value="24" /><LABEL for="radRadioButton_6">Value 24</LABEL> 
      </TD> 
     </TR> 
     <TR> 
      <TD>      
       <INPUT id="radRadioButton_2" type="radio" name="radRadioButton" value="3" /><LABEL for="radRadioButton_2">Value 3</LABEL> 
      </TD> 
      <TD>      
       <INPUT id="radRadioButton_7" type="radio" name="radRadioButton" value="25" /><LABEL for="radRadioButton_7">Value 25</LABEL> 
      </TD> 
     </TR> 
     <TR> 
      <TD>      
       <INPUT id="radRadioButton_3" type="radio" name="radRadioButton" value="21" /><LABEL for="radRadioButton_3">Value 21</LABEL> 
      </TD> 
      <TD>      
       <INPUT id="radRadioButton_8" type="radio" name="radRadioButton" value="4" /><LABEL for="radRadioButton_8">Value 4</LABEL> 
      </TD> 
     </TR> 
     <TR> 
      <TD>      
       <INPUT id="radRadioButton_4" type="radio" name="radRadioButton" value="22" /><LABEL for="radRadioButton_4">Value 22</LABEL> 
      </TD> 
     </TR> 
    </TABLE> 
    <DIV id="panAnotherPanel"><BR> 
     <TABLE cellpadding="0" cellspacing="0" border="0" style="display:inline;vertical-align:top;"> 
      <TR> 
       <TD valign="top"> 
        <TEXTAREA name="DESC:txtTextArea" rows="3" cols="48" id="DESC_txtTextArea"></TEXTAREA>&nbsp; 
       </TD> 
       <TD valign="top"><SPAN id="DESC_lblCharCount" style="font-size:8pt;"></SPAN> 
       </TD> 
      </TR> 
     </TABLE> 
    </DIV> 
</DIV> 

這裏是我寫的函數：

function clearChildren(node) { 

var child; 
if (node.childNodes.length > 0) { 
    child= node.firstChild; 
} 

while(child) { 
    if (child.type == "text") { 
     alert(child.id); 
     child.value = ""; 
    } 
    else if (child.type == "checkbox") { 
     child.checked = false; 
    } 
    else if (child.type == "radio") { 
     alert(child.id); 
     child.checked = false; 
    } 
    else if (child.type == "textarea") { 
     child.innerText = ""; 
    } 

    //alert(child.childNodes.length); 

    if (child.childNodes.length > 0) { 
     var grandchild = child.firstChild; 

     while (grandchild) { 
      clearChildren(grandchild); 
     } 
     grandchild = grandchild.nextSibling; 
    } 

    child = child.nextSibling; 
} 

} 

Answer 1

，可隨時更換的孩子=與孩子= GETNEXT child.getNextSibling線（child），其中getNext具有此實現：

function getNext(node) { 
    if (node.nextSibling) { 
    return node.nextSibling; 
    } 
    var parent = node.parentNode; 
    do { 
    if (parent && parent.nextSibling) { 
     return parent.nextSibling; 
    } 
    parent = parent.parentNode; 
    } while (parent); 
    return null; 
} 

（並刪除child.childNodes上的循環）

Answer 2

function clearChildren(node){ 

    if(node.childNodes.length >0){ 
     for(var index=0;index<node.childNodes.length;index++){ 
      clearChildren(node.childNodes[index]); 
     } 
    } 

    if(node.localName == "input"){ 
     if (node.type == "text") { 
      alert(node.id); 
      node.value = ""; 
     } 
     else if (node.type == "checkbox") { 
      node.checked = false; 
     } 
     else if (node.type == "radio") { 
      alert(node.id); 
      node.checked = false; 
     } 
     else if (node.type == "textarea") { 
      node.innerText = ""; 
     } 
    } 
} 

clearChildren(document.getElementById("panSomePanel")); 

Answer 3

我覺得你已經過分複雜了一點。我發現這個片段，它解析了一張桌子的所有孩子並設置了顏色。

function setColors(tbody, color1, color2){ 
var colors = [color1, color2]; 
var counter = 0; 
var tr  = tbody.firstChild; 

while(tr){ 
    tr.style.backgroundColor = colors[counter++ % 2]; 
    tr = tr.nextSibling; 
} 
} 

我得到這個來自：http://www.htmlgoodies.com/primers/jsp/article.php/3594621/Javascript-Basics-Part-6.htm

嘗試把while循環中的結算開關 - 你只需要設定TR VAR是DIV ID，然後檢查在您輸入類型while循環。希望這有些幫助。

Answer 4

你會想，像這樣的遞歸方法來解決這個問題：

function clearChildren(node) { 

    var child = null; 
    if (node.childNodes.length > 0) { 
     child = node.firstChild; 
    } 

    while (child) { 
     if (child.type == "text") { 
      alert(child.id); 
      child.value = ""; 
     } 
     else if (child.type == "checkbox") { 
      child.checked = false; 
     } 
     else if (child.type == "radio") { 
      alert(child.id); 
      child.checked = false; 
     } 
     else if (child.type == "textarea") { 
      child.innerText = ""; 
     } 

     //alert(child.childNodes.length); 
     // here is the recursive method call 
     clearChildren(child); 

     child = child.nextSibling; 
    } 

}