CODEWITHSUNDEEP
javascript
Eng.Fouad
Eng.Fouad

Reputation: 117597

check if a cell of table contains a certain form

I want to check if a specific cell in a table contains a specific form using JavaScript.

Here is what I have done:

for(var i = 1; i >= 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;
    }
}

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

EDIT:

Here is the whole code:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- 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 > 1; i--)
            {
                mainTable.tBodies[0].moveRow(i - 1, i);
            }

            // delete (skill) from the old index
            var cellIndex;
            for(var i = 1; i >= 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 >= 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 <= 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 -->
</script>
</HEAD>

<BODY>

    <table id="mainTable" name="mainTable" border="1">

        <tr>
            <th>Rank
            </th>
            <th colspan="5">
                <p align="center">The Criteria
            </th>
        </tr>
        <tr>
            <td>
                <p align="center">1
            </td>

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

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

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

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

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

        </tr> 
    </table>
</body>

Upvotes: 1

Views: 3574

Answers (2)

user113716
user113716

Reputation: 322502

A tr element itself doesn't have a .length property.

This:

for(var i = 1; i >= mainTable.tBodies[0].rows[2].length; i++)

...should get the length from cells instead:

  // right here -----------------------------------v
for(var i = 1; i >= mainTable.tBodies[0].rows[2].cells.length; i++)

And a <td> doesn't have an elements property. I assume you intend .children, depending on the browsers you're supporting.

  // ------------------------------------v
mainTable.tBodies[0].rows[2].cells[i].children[0]

Upvotes: 2

Sherif elKhatib
Sherif elKhatib

Reputation: 45942

You have a small typo i guess in indices:

for(var i = 0; i <= 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;
    }
}

Upvotes: 0

Related Questions