0

我需要能够遍历指定 DIV 标记中的所有表单字段。基本上，任何给定的 DIV 标签都可以有多个表单字段（这很容易解析），但它也可以有任意数量的表格，甚至是额外的 DIV 标签（添加额外的分层层次）。

我编写了一个基本函数，它遍历父节点的每个直接后代（在本例中为 DIV 标记）并清除其值。这部分工作正常。问题是让它在他们自己的孩子（孙子）时解析孩子。它最终陷入了无限循环。

在这种情况下，我需要能够在 DIV 标记“panSomePanel”中找到所有表单字段，其中将包括一些直接子项（txtTextField1），以及一些位于嵌套 TABLE 对象和/或嵌套 DIV 标记（radioButton、 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;
}

}
4

4 回答 4

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"));
于 2010-05-18T17:20:38.190 回答
0

我认为您使搜索过于复杂。我找到了这个片段，它解析了一个表的所有孩子并设置了颜色。

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 循环中检查您的输入类型。希望这会有所帮助。

于 2010-05-18T17:23:16.547 回答
0

你会想用这样的递归方法来解决这个问题：

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;
    }

}
于 2010-05-18T17:23:17.433 回答
0

您可以用 child = getNext(child) 替换 child = child.getNextSibling 行，其中 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 上的循环）

于 2010-05-18T17:17:11.193 回答