Question

我想检查表中的特定单元格是否包含使用JavaScript的特定表单。

这就是我所做的：

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"实际上在单元格编号1内，但if语句始终为false，尽管它应该在i = 1处为真。我怎样才能在JavaScript中实现这一目标？

修改

以下是整个代码：

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

Answer 1

tr元素本身没有.length属性。

此：

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

...应该从cells得到长度：

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

<td>没有elements属性。我假设您打算.children，具体取决于您支持的浏览器。

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

Answer 2

我猜测你有一个小错字：

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

检查表格的单元格是否包含某种形式

2 个答案: