JavaScript 重命名表单图像输入名称答案

【问题标题】：JavaScript Renaming Form Image Input NameJavaScript 重命名表单图像输入名称
【发布时间】：2012-02-07 06:40:21
【问题描述】：

我正在开发这个以在 Internet Explorer 8 中使用（因为在工作中我们必须使用它）。我有一个带有表格的表格的页面。该表有一个“克隆”行的按钮，“AddScheduleRow()”。那部分效果很好。每行都有一个用于删除该行的按钮“DeleteRow(r)”。那部分也很好用。我还有一个脚本来重命名/重新编号每一行，“RenumberRows()”。它几乎工作得很好。我可以重命名文本字段（例如，以前的 StartDate3 现在变成了 StartDate2）。但是，在每一行中都有一个 type="image" 的输入，并且它的命名方式与任何输入的名称一样。它的名称是“StartDateCal”。问题是在重命名过程中，当它点击图像输入时 (TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;)，我收到一个 JavaScript 错误 "'TheForm.StartDateCal ' 为 null 或不是对象”。我无法弄清楚这一点，它阻碍了继续前进。

如何尝试重命名？

下面是必要的代码：

HTML

<html>
    <head>
    </head>
    <body>
        <form name="UpdateSchedule" method="post" action="DoSchedule.asp">
            <input type="hidden" name="NumRows" value="0">
            <input type="hidden" name="RowsAdded" value="0">
            <table id="ClassScheduleTable">
                <tr id="ScheduleRow" style="display:none;">
                    <td>
                        <input type="text" name="RowNum" value="0" size="1" onclick="alert(this.name)">
                    </td>
                    <td>
                        <b>Start Date</b> <input type="text" name="StartDate" value="" onclick="alert(this.name);" size="8">&nbsp;
                        <input type="image" name="StartDateCal" src="http://www.CumminsNorthwest.com/ATT/Img/Calendar3.png" style="border-style:none;" onClick="alert('name = ' + this.name);return false;">
                    </td>
                    <td>
                        <input type="button" value="Del." name="DelRow" class="subbuttonb" onclick="DeleteRow(this);">
                    </td>
                </tr>
                <tr>
                    <td colspan="3" style="text-align:right">
                    <input type="button" value="Add Class Date" class="SubButton" onclick="AddScheduleRow();">
                    </td>
                </tr>
            </table>
        </form>
    </body>    
<script language="JavaScript">

    var TheForm = document.forms.UpdateSchedule;
    var NumRows =0;
    var RowsAdded =0;
    function AddScheduleRow(){
        NumRows++;
        TheForm.NumRows.value = NumRows;
        RowsAdded++;
        TheForm.RowsAdded.value = RowsAdded;

        var TableRowId = "ScheduleRow";
        var RowToClone = document.getElementById(TableRowId);
        var NewTableRow = RowToClone.cloneNode(true);

        NewTableRow.id = TableRowId + NumRows ;
        NewTableRow.style.display = "table-row";

        var NewField = NewTableRow.children;

        for (var i=0;i<NewField.length;i++){
            var TheInputFields = NewField[i].children;
            for (var x=0;x<TheInputFields.length;x++){
                var InputName = TheInputFields[x].name;
                if (InputName){
                    TheInputFields[x].name = InputName + NumRows;
                    //alert(TheInputFields[x].name);
                }
                var InputId = TheInputFields[x].id;
                if (InputId){
                    TheInputFields[x].id = InputId + NumRows;
                //alert(TheInputFields[x].id);
                }
            }
        }

        var insertHere = document.getElementById(TableRowId);
        insertHere.parentNode.insertBefore(NewTableRow,insertHere);
        RenumberRows();
    }

    AddScheduleRow();

    function DeleteRow(r){
        var i=r.parentNode.parentNode.rowIndex;
        document.getElementById("ClassScheduleTable").deleteRow(i);
        NumRows--;
        TheForm.NumRows.value = NumRows;
        RenumberRows();
    }

    function RenumberRows(){
        var TempCounter = 0;
        for (var i=0;i<=RowsAdded;i++){
            if (TheForm.RowNum[i]){
                TempCounter++;
                TheForm.RowNum[i].name = "RowNum" + TempCounter;
                TheForm.RowNum[i].value = TempCounter;
                TheForm.StartDate[i].name = "StartDate" + TempCounter;
                TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;
            }
        }
    }


</script>

</html>

【问题讨论】：

标签： javascript html dom forms

【解决方案1】：

可能与您的 DTD 有关，

试试 HTML4 Strict：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【讨论】：

【解决方案2】：

你可以使用

document.getElementsByName('StartDateCal')[i].name = "StartDateCal" + TempCounter;

而不是

TheForm.StartDateCal[i].name = "StartDateCal" + TempCounter;

【讨论】：

那行得通。不知道为什么 ot 以这种方式工作而不是将其视为普通表单元素，但它确实有效。
很高兴知道:)。但是您最好使用该解决方案来设置您的文档类型，就像 achusonline 写的那样。您只需将该行插入文档顶部即可。也在标记之前。我尝试了该解决方案，它也有效。它似乎是更清洁的解决方案。