Итерация по всем полям формы в указанном теге 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

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

Вы захотите подойти к этой проблеме с помощью рекурсивного метода, например так:

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

}

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, а затем проверить типы ввода внутри цикла while. Надеюсь, это поможет.

Answer 4

Вы можете заменить строку 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)