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

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 2

您可以将child = child.getNextSibling行替换为child = getNext（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 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;
    }

}

遍历指定DIV标记内的所有表单域

4 个答案: