驗證表中的動態元素

我想驗證動態創建的textarea，在下面提到的代碼中，我只能驗證第一行，但我無法驗證第二行。如何驗證/獲取所有行值。驗證表中的動態元素

在此先感謝。

要創建動態元素，請單擊添加問題圖像。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title> new document </title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var i = 0; 
     $("#AddQuestion").click(function() 
     { 
      $("#NoQuestions").remove(); 
      ++i; 
      var IdCount = i + ".)"; 
      var newRowContent = "<tr id='SQRow"+i+"'"+" ><td>" + IdCount + "</td>" + "<td><textarea id='txtQuestions" + i + "'" + "style='height: 45px;width: 420px'></textarea> </td>" + "<td><select id='ddlDataType" + i + "'" + " style='margin-left: 47px'><option value=''>Select Data Type</option><option value='int'>Numeric</option><option value='Varchar'>Alpha Numeric</option></select> </td>" + "<td><div ><a href='#'><img src='/Images/1363247672_document-edit.png' width='26' height='27' alt='EditButton'/> </a><a href='#'><img src='/Images/1363247321_Remove.png' alt='DeleteButton'/></a> </div> </br><div style='display: none'><a href='#'><img src='/Images/Accept-iconSmall.png' width='26' height='27' alt='UpdateButton'/></a><a href='#'><img src='/Images/Button-Cancel-icon.png' width='26' height='27' alt='CancelButton' /></a></td>" + "</tr>"; 

      $("#tblSecurityQuestions").append(newRowContent); 
     }); 
     $("#btnUpdateQuestions").click(function() 
     { 
      var txtAreaVal = $('textarea').val().length; 
      var ddlDataType = $('#tblSecurityQuestions select').val().length; 

      alert(txtAreaVal); 
      alert(ddlDataType + "The ddl is "); 
     if (txtAreaVal <= 0) 
     { 
      alert('Please add Questions'); 
      return; 
     } else if (ddlDataType <= 0) 
     { 
      alert('Please select the data type'); 
      return; 
     } 
     }); 

    }); 
    </script> 
</head> 
<body> 
    <form id="SQPageForm" name="SQPageForm" method="post" action=""> 
      <div id="SecurityQuestions" style="height: auto;border-color: #f00;border: 1.5px;border-style: dotted"> 

       <h3>Configure Security Questions</h3> 
       <div id="AddNewSecurityQuestions" style=""> 
        <p style="float: left;margin-top: 11px">Add Question </p> 

        <img id="AddQuestion" src="/Images/document-add-icon.png" alt="Add Questions" width="35px" height="35px" style="cursor: pointer"/> 
       </div> 
       </br> 
       &nbsp;Security Questions? 
       </br> 

       <table border="1" id="tblSecurityQuestions"> 
        <tr> 
         <th style="width: 25px"> 
          ID 
         </th> 
         <th style="width: 424px"> 
          Security Questions 
         </th> 
         <th style="width: 210px"> 
          DataType 
         </th> 
         <th style="width :65px"> 
          Actions 
         </th> 

        </tr> 
         </table> 
        </div> 
       </br> 
       </br> 
       <input type="button" id="btnUpdateQuestions" value="Set Security Question" style="margin-left: 300px" /> 
</body> 
</html>

來源

2013-03-19 Vignesh

這是什麼$（'＃tblSecurityQuestions select'）。val（）。length; – PSR 2013-03-19 04:13:25

爲什麼不使用for或while循環？ – 2013-03-19 04:16:54

嘗試遍歷所有的文本區域，然後檢查相同的條件：

for(var i=0; i<NoOfquestions; i++){ 

    var txtAreaVal = $('#txtQuestions'+i).val().length; 
    var ddlDataType = $('#tblSecurityQuestions select').val().length; 

    alert(txtAreaVal); 
    alert(ddlDataType + "The ddl is"); 

    if (txtAreaVal <= 0) 
    { 
     alert('Please add Questions'); 
     return; 
    } 
    else if (ddlDataType <= 0) 
    { 
     alert('Please select the data type'); 
     return; 
    } 
}

來源

2013-03-19 04:10:55 PSR

嘗試

$("#btnUpdateQuestions").click(function() { 
    $('#tblSecurityQuestions tr:gt(0)').each(function() { 
     var $this = $(this); 
     var txtAreaVal = $('textarea', $this).val().length; 
     var ddlDataType = $('select', $this).val().length; 

     alert(txtAreaVal); 
     alert(ddlDataType + "The ddl is "); 
     if (txtAreaVal <= 0) { 
      alert('Please add Questions'); 
      return; 
     } else if (ddlDataType <= 0) { 
      alert('Please select the data type'); 
      return; 
     } 
    }) 
});

來源

2013-03-19 04:19:47

var textAreaSize = $('#tblSecurityQuestions tr:gt(1)').size(); 

     for (var j = 1; j <= textAreaSize; j++) 
     { 
      var txtAreaVal = $('#txtQuestions' + j).val(); 
      var ddlDataType = $('#ddlDataType' + j).val(); 
      if (txtAreaVal <= 0) 
      { 
       alert('Please add Questions'); 
       return; 
      } else if (ddlDataType <= 0) 
      { 
       alert('Please select the data type'); 
       return; 
      } 
     }

我想出了一個解決方案，它爲我工作現在

來源

2013-03-19 07:02:51 Vignesh

驗證表中的動態元素

回答

相關問題