检查表格的单元格是否包含某个表单

check if a cell of table contains a certain form

本文关键字：包含某 表单 是否 单元格 检查表 表格 检查      更新时间：2023-09-26

我想检查表中的特定单元格是否包含使用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语句总是假的，尽管它应该在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>

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]

我猜你在索引中有一个小错别字:

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;
    }
}
相关文章：