2010-10-20 34 views
1

我有一個可編輯的網格視圖。當我點擊與gridview中的一行相對應的編輯按鈕時,我提供了兩個文本框來輸入兩個新的值.2文本框,因爲我有2列。現在這個文本框是在運行時生成的。我想在javascript中訪問這個文本框,並對它們進行驗證。這是html語法。如何獲得在運行時在JavaScript中的GridView中創建的文本框的ID

<table cellspacing="0" rules="all" border="1" id="TableGridView" style="border-collapse:collapse;table-layout:fixed"> 
      <tr> 
       <th scope="col"><b>Action</b></th><th scope="col"><b>PROCESSOR_ID</b></th><th scope="col"><b>PROCESSOR_NAME</b></th> 
      </tr><tr> 
       <td><input type="image" name="TableGridView$ctl02$edit_button" id="TableGridView_ctl02_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl02$delete_button" id="TableGridView_ctl02_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl02$insert_button" id="TableGridView_ctl02_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl02_PROCESSOR_ID">23</span></td><td><span id="TableGridView_ctl02_PROCESSOR_NAME">dasdas</span></td> 
      </tr><tr> 
       <td><input type="image" name="TableGridView$ctl03$edit_button" id="TableGridView_ctl03_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl03$delete_button" id="TableGridView_ctl03_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl03$insert_button" id="TableGridView_ctl03_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl03_PROCESSOR_ID">123</span></td><td><span id="TableGridView_ctl03_PROCESSOR_NAME">asdasdas</span></td> 
      </tr><tr> 
       <td><input type="image" name="TableGridView$ctl04$update_button" id="TableGridView_ctl04_update_button" title="Add" src="images/update.gif" onclick="return (textfieldvalidation());" style="border-width:0px;" /><input type="image" name="TableGridView$ctl04$cancel_button" id="TableGridView_ctl04_cancel_button" title="Cancel" src="images/cancel.gif" style="border-width:0px;" /></td><td><input name="TableGridView$ctl04$PROCESSOR_ID" type="text" id="TableGridView_ctl04_PROCESSOR_ID" /></td><td><input name="TableGridView$ctl04$PROCESSOR_NAME" type="text" id="TableGridView_ctl04_PROCESSOR_NAME" /></td> 
      </tr><tr> 
       <td><input type="image" name="TableGridView$ctl05$edit_button" id="TableGridView_ctl05_edit_button" title="Edit" src="images/edit.gif" style="border-width:0px;" /><input type="image" name="TableGridView$ctl05$delete_button" id="TableGridView_ctl05_delete_button" title="Delete" src="images/delete.gif" onclick="return confirm('Are you sure you want to delete the record?');" style="border-width:0px;" /><input type="image" name="TableGridView$ctl05$insert_button" id="TableGridView_ctl05_insert_button" title="Insert" src="images/insert.bmp" style="border-width:0px;" /></td><td><span id="TableGridView_ctl05_PROCESSOR_ID">6456</span></td><td><span id="TableGridView_ctl05_PROCESSOR_NAME">dg</span></td> 
      </tr> 
     </table> 

我'有'使用IE 6.0。

我已經嘗試document.getElementbyID爲表和getElementsByTagName和他們不工作。

var curValue = document.getElementById(「<%= TableGridView.ClientID%>」)。rows; curValue在IE中是1,在Firefox中是4。

+0

你如何添加的editboxes?使用JavaScript或在代碼隱藏? – Kangkan 2010-10-20 10:50:11

+0

您可能需要考慮重新設置代碼佈局的格式,使其適合屏幕。此刻,我發現很難提供幫助。 – 2010-10-20 10:51:12

+0

代碼隱藏..通過模板執行@Kangkan – gizgok 2010-10-20 10:57:42

回答

2

你應該傳遞的參考被點擊的元素並避免使用ID進行播放。

<input type="image" ... onclick="return textfieldvalidation(this)"... 

而且功能

function textfieldvalidation(button){ 

    var tr = button.parentNode.parentNode, 
     inputs = tr.getElementsByTagName('INPUT'), //all INPUT tags of the TR 
     id = inputs[0].getAttribute('id'); //or inputs[0].id 
} 
+0

太棒了...........謝謝 – gizgok 2010-10-20 12:29:41

0

使用jQuery這一點,因爲它具有跨瀏覽器支持

$.each("#TableGridView tr td input",function(){ 
    alert($(this).attr("id")); 
}); 
+0

任何使用javascript的方法 – gizgok 2010-10-20 10:59:43

2

在這裏,我給你舉例會怎麼做,這裏的Java腳本代碼

enter code here 

// JScript文件

//該方法用於添加行,如果電子郵件域的驗證 函數addRows(TABLEID) { if(validate(this.obj)) var emailTableRow = document.getElementById(「ctl00_ContentPlaceHolder1_EmailTableRow」).value;

 var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 


     var lastRow; 
     if (emailTableRow == '') { 
      emailTableRow = "'1'"; 
      lastRow = 1; 
     } 
     else 
     { 

      lastRow = emailTableRow.substr(emailTableRow.lastIndexOf(",") + 2, emailTableRow.lastIndexOf("'") - (emailTableRow.lastIndexOf(",") + 2)); 


     } 

     var newRow = parseInt(lastRow) + 1; 

     emailTableRow = emailTableRow + ",'" + newRow.toString() + "'"; 

     document.getElementById("ctl00_ContentPlaceHolder1_EmailTableRow").value = emailTableRow; 


     var row = table.insertRow(rowCount); 


     var cell0 = row.insertCell(0); 

    cell0.style.marginLeft="0px"; 
cell0.style.width="200px"; 
cell0.style.height="12px"; 
//cell0.style.line-height="12px"; 
cell0.style.paddingLeft="0px"; 
cell0.style.background="#70b9ee"; 
cell0.style.fontFamily="Trebuchet MS"; 
cell0.style.fontSize="11px"; 
cell0.style.fontWeight="normal"; 
cell0.style.color="#fff"; 
cell0.style.textAlign="center"; 
cell0.style.border="0px solid #000"; 

     var element0 = document.createElement("label"); 
     element0.innerHTML = newRow; 
     element0.setAttribute("size", "3"); 

     element0.setAttribute("name", "lblRownumber" + newRow.toString()); 
     element0.setAttribute("id", "lblRownumber" + newRow.toString()); 
     cell0.appendChild(element0); 



     var cell1 = row.insertCell(1); 
     cell1.style.marginLeft="0px"; 
cell1.style.width="200px"; 
cell1.style.height="12px"; 
//cell0.style.line-height="12px"; 
cell1.style.paddingLeft="0px"; 
cell1.style.background="#70b9ee"; 
cell1.style.fontFamily="Trebuchet MS"; 
cell1.style.fontSize="11px"; 
cell1.style.fontWeight="normal"; 
cell1.style.color="#fff"; 
cell1.style.textAlign="center"; 
cell1.style.border="0px solid #000"; 
     var element1 = document.createElement("input"); 
     element1.type = "text"; 

     element1.setAttribute("name", "txtEMAIL_ADDRESS" + newRow.toString()); 
     element1.setAttribute("id", "txtEMAIL_ADDRESS"+ newRow.toString()); 

     cell1.appendChild(element1); 


     var cell2 = row.insertCell(2); 

     cell2.style.marginLeft="0px"; 
cell2.style.width="200px"; 
cell2.style.height="12px"; 
//cell0.style.line-height="12px"; 
cell2.style.paddingLeft="0px"; 
cell2.style.background="#70b9ee"; 
cell2.style.fontFamily="Trebuchet MS"; 
cell2.style.fontSize="11px"; 
cell2.style.fontWeight="normal"; 
cell2.style.color="#fff"; 
cell2.style.textAlign="center"; 
cell2.style.border="0px solid #000"; 
     var element2 = document.createElement("input"); 
     element2.setAttribute("name", "txtName"+newRow.toString()); 
     element2.setAttribute("id", "txtName"+newRow.toString()); 
     element2.type = "text"; 
     cell2.appendChild(element2); 



     var cell3 = row.insertCell(3); 

     cell3.style.marginLeft="0px"; 
cell3.style.width="200px"; 
cell3.style.height="12px"; 
//cell0.style.line-height="12px"; 
cell3.style.paddingLeft="0px"; 
cell3.style.background="#70b9ee"; 
cell3.style.fontFamily="Trebuchet MS"; 
cell3.style.fontSize="11px"; 
cell3.style.fontWeight="normal"; 
cell3.style.color="#fff"; 
cell3.style.textAlign="center"; 
cell3.style.border="0px solid #000"; 
     var element3 = document.createElement("input"); 
     element3.setAttribute("name", "txtPROMOTIONAL_COMPAIGN"+newRow.toString()); 
     element3.setAttribute("id", "txtPROMOTIONAL_COMPAIGN"+newRow.toString()); 
     element3.type = "text"; 
     cell3.appendChild(element3); 


     var row = table.insertRow(rowCount+1); 


     var cell0 = row.insertCell(0); 
     cell0.colSpan = 4; 
     cell0.style.textAlign = "left"; 
     cell0.style.paddingLeft = "0px" 
     cell0.style.fontWeight="normal"; 
     cell0.style.fontSize="11px"; 

cell0.style.fontFamily =「Trebuchet MS」; cell0.style.marginLeft =「0px」; //cell0.style.margin="0px「; // cell0.style.width =「200px」; // cell0.style.height =「20px」; // cell0.style.line-height =「12px」; cell0.style.paddingLeft =「5px」; cell0.style.background =「#70b9ee」; // cell0.style.font-family =「Trebuchet MS」; // cell0.style.font-size =「11px」; // cell0.style.font-weight =「normal」; cell0.style.color =「#fff」; // cell0.style.text-align =「left」; //cell0.style.border="0px solid#000「;

 var element0 = document.createElement("label"); 
     element0.innerHTML ="Please feel free to change the Text"; 
     element0.setAttribute("size", "100"); 

     element0.setAttribute("name", "lblMessage" + newRow.toString()); 
     element0.setAttribute("id", "lblMessage" + newRow.toString()); 
     element0.setAttribute("class","srn-td-space3"); 
     cell0.appendChild(element0); 




     var row = table.insertRow(rowCount+2); 



      var cell0 = row.insertCell(0); 
      cell0.colSpan = 4; 
      cell0.style.textAlign = "left"; 
     cell0.style.paddingLeft = "5px" 
     cell0.style.fontWeight="normal"; 
     cell0.style.fontSize="11px"; 

cell0.style.fontFamily = 「分析天平MS」; cell0.style.marginLeft =「1px」; // cell0.style.width =「200px」; // cell0.style.height =「20px」; // cell0.style.line-height =「12px」; // cell0.style.paddingLeft =「0px」; cell0.style.background =「#70b9ee」; // cell0.style.font-family =「Trebuchet MS」; // cell0.style.font-size =「11px」; // cell0.style.font-weight =「normal」; cell0.style.color =「#fff」; // cell0.style.text-align =「left」; //cell0.style.border="0px solid#000「;

  var element0 = document.createElement("textarea"); 

      element0.setAttribute("cols", "50"); 

      element0.setAttribute("rows", "4"); 
      element0.setAttribute("name", "txtAreaEmailBody" + newRow.toString()); 
      element0.setAttribute("id", "txtAreaEmailBody" + newRow.toString()); 
      cell0.appendChild(element0); 







    } 

     return false; 

}

//該方法用於驗證電子郵件..... 功能驗證(formobj){

var emailPattern = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/; 

var getWorkFields; 

getWorkFields = getFieldRequired('ctl00_ContentPlaceHolder1_SendmailsTable', 'ctl00_ContentPlaceHolder1_EmailTableRow', 'txtEMAIL_ADDRESS'); 

var fRequired = getWorkFields; 

var fieldRequired = fRequired.split(","); 

var validRegExp = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/i; 
var email = document.getElementById(fieldRequired).value; 


if (email == "") { 
    alert("email cannot be empty"); 
    return false; 
} 
else { 

    if (email.search(validRegExp) == -1) { 

     alert(" A valid E-mail is required"); 

     return false; 
    } 
    else { 
     return true; 
    } 

} 

} //該方法用於是生成ID動態 功能getFieldRequired(TABLEID,hiddenFieldID,filedNamePrefix){

try { 
     var returnValue = ''; 
     var accRow = document.getElementById(hiddenFieldID).value; 

     if (accRow == null || accRow == '') 
      accRow = "'1'"; 

     var arrayString; 
     arrayString = accRow.toString().split(","); 


     aFieldPrefix = filedNamePrefix.toString().split(","); 

     var I = parseInt(0); 
     var J = parseInt(0); 
     for (I = 0; I < arrayString.length; I++) { 
      for (J = 0; J < aFieldPrefix.length; J++) { 
       if (I == 0 && J == 0) 
       { 
        returnValue = aFieldPrefix[J] + arrayString[I].replace("'", "").replace("'", ""); 

       } 
       else 
       { 
        returnValue = aFieldPrefix[J] + arrayString[I].replace("'", "").replace("'", ""); 

       } 

      } 
     } 

     return returnValue; 

    } 
    catch (e) { 
     alert(e); 
    } 

} 
相關問題