check if a cell of table contains a certain form
<p>I want to check if a specific cell in a table contains a specific form using JavaScript.</p>

<p>Here is what I have done:</p>

<pre><code>for(var i = 1; i &gt;= mainTable.tBodies[0].rows[2].length; i++)
{
    if(mainTable.tBodies[0].rows[2].cells[i].elements[0] == document.getElementById("my_form"))
    {
        var cellIndex = i;
        alert("cell" + i + " contains the form");
        break;
    }
}
</code></pre>

<p><code>"my_form"</code> is actually inside cell number <code>1</code>, but the if-statement is always false despite it should be true at <code>i = 1</code>. How can I achieve this in JavaScript?</p>

<p><strong>EDIT:</strong></p>

<p>Here is the whole code:</p>

<pre><code>&lt;HEAD&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Begin

//var mainTable = document.getElementById("mainTable");
var index_Skill = 1;
var index_Speed = 1;
var index_Age = 1;
var index_Strength = 1;
var index_Height = 1;

function moveUp(theForm)
{
    if(theForm == "form_Skill")
    {
        if(index_Skill == 1)
        {
            // get the max index of the table
            var newIndex = Math.max(++index_Skill, ++index_Speed, ++index_Age, ++index_Strength, ++index_Height);

            // insert a new row
            var newRow = mainTable.tBodies[0].insertRow(newIndex);

            // shift the rows one level down
            for(var i = newIndex; i &gt; 1; i--)
            {
                mainTable.tBodies[0].moveRow(i - 1, i);
            }

            // delete (skill) from the old index
            var cellIndex;
            for(var i = 1; i &gt;= mainTable.tBodies[0].rows[2].length; i++)
            {
                if(mainTable.tBodies[0].rows[2].cells[i].elements[0] == document.getElementById("form_Skill"))
                {
                    cellIndex = i;
                    alert(i);
                    break;
                }
            }
            for(var i = cellIndex; i &gt;= mainTable.tBodies[0].rows[2].length; i++)
            {
                mainTable.tBodies[0].rows[2].cells[i].innerHTML = mainTable.tBodies[0].rows[2].cells[i+1].innerHTML;
            }
            //mainTable.tBodies[0].rows[2].cells[mainTable.tBodies[0].rows[2].length].innerHTML = "";

            // add (skill) to the new index
            var newCell = mainTable.tBodies[0].rows[1].insertCell(0);
            newCell.innerHTML = 1;
            newCell.setAttribute("align", "center");
            var newCell = mainTable.tBodies[0].rows[1].insertCell(1);
            var obj = document.getElementById(theForm).cloneNode(true);
            newCell.appendChild(obj);

            // fixes the id's
            for(var i = 1; i &lt;= newIndex; i++)
            {
                mainTable.tBodies[0].rows[i].cells[0].innerHTML = i;
                mainTable.tBodies[0].rows[i].cells[0].setAttribute("align", "center");
            }

        }
    }
}


function moveDown(theForm)
{

}


//  End --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;
</code></pre>



<pre><code>&lt;BODY&gt;

    &lt;table id="mainTable" name="mainTable" border="1"&gt;

        &lt;tr&gt;
            &lt;th&gt;Rank
            &lt;/th&gt;
            &lt;th colspan="5"&gt;
                &lt;p align="center"&gt;The Criteria
            &lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;p align="center"&gt;1
            &lt;/td&gt;

            &lt;td&gt;
                &lt;form name="form_Skill" method="post" style="margin: 0; text-align: center;"&gt; 
                    &lt;input type="button" name="Up1" value="Up" onclick="moveUp('form_Skill');"&gt; Skill
                    &lt;input type="button" name="Down1" value="Down" onclick="moveDown('form_Skill');"&gt;
                &lt;/form&gt;
            &lt;/td&gt;

            &lt;td&gt;
                &lt;form name="form_Speed" method="post" style="margin: 0; text-align: center;"&gt; 
                    &lt;input type="button" name="Up2" value="Up" onclick="moveUp('form_Speed');"&gt; Speed
                    &lt;input type="button" name="Down2" value="Down" onclick="moveDown('form_Speed');"&gt;
                &lt;/form&gt;
            &lt;/td&gt;

            &lt;td&gt;
                &lt;form name="form_Age" method="post" style="margin: 0; text-align: center;"&gt; 
                    &lt;input type="button" name="Up3" value="Up" onclick="moveUp('form_Age');"&gt; Age
                    &lt;input type="button" name="Down3" value="Down" onclick="moveDown('form_Age');"&gt;
                &lt;/form&gt;
            &lt;/td&gt;

            &lt;td&gt;
                &lt;form name="form_Strength" method="post" style="margin: 0; text-align: center;"&gt; 
                    &lt;input type="button" name="Up4" value="Up" onclick="moveUp('form_Strength');"&gt; Strength
                    &lt;input type="button" name="Down4" value="Down" onclick="moveDown('form_Strength');"&gt;
                &lt;/form&gt;
            &lt;/td&gt;

            &lt;td&gt;
                &lt;form name="form_Height" method="post" style="margin: 0; text-align: center;"&gt; 
                    &lt;input type="button" name="Up5" value="Up" onclick="moveUp('form_Height');"&gt; Height
                    &lt;input type="button" name="Down5" value="Down" onclick="moveDown('form_Height');"&gt;
                &lt;/form&gt;
            &lt;/td&gt;

        &lt;/tr&gt; 
    &lt;/table&gt;
&lt;/body&gt;
</code></pre>
