JavaScript重命名錶單圖像輸入名稱

我正在開發此用於Internet Explorer 8（因爲在工作中我們必須使用它）。我有一個帶有表格的表格。該表有一個「克隆」行的按鈕，「AddScheduleRow（）」。這部分工作很好。每行都有一個按鈕來刪除該行「DeleteRow（r）」。這部分工作得很好。我還有一個腳本來重新命名/重新編號每行，「RenumberRows（）」。它幾乎效果不錯。我可以重命名文本字段（例如之前的StartDate3現在變成了StartDate2）。但是，在每一行中都是type =「image」的輸入，它的命名方式與您應該使用任何輸入一樣。它的名字是「StartDateCal」。問題是，在重命名過程中，當它命中圖像輸入（TheForm.StartDateCal [i] .name =「StartDateCal」+ TempCounter;），我得到一個JavaScript錯誤「'TheForm.StartDateCal'爲null或不一個東西」。我無法弄清楚這一點，它正在繼續前進。JavaScript重命名錶單圖像輸入名稱

我該怎麼做才能嘗試重命名< input type = image />？

下面是必要的代碼：

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>

來源

2012-01-10 Soren

可能是跟你的DTD，

嘗試HTML4嚴格：

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

來源

2012-01-10 20:51:56 redDevil

您可以使用

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

，而不是

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

來源

2012-01-10 21:27:41 gluix

工程。不知道爲什麼這樣工作，而不是像一個正常的形式元素，但它的作品。 – Soren 2012-01-10 22:16:26

很高興知道:)。但是，您可以更好地使用該解決方案來設置您的文檔類型，如achusonline所寫。您只需將該行插入文檔的頂部。在之前的 -tag。我試過這個解決方案，它也可以。它似乎是更清潔的解決方案。 – gluix 2012-01-10 22:33:38

JavaScript重命名錶單圖像輸入名稱

回答

相關問題