如何在td中获取输入框的值并使用JQuery

时间:2018-07-06 02:37:34

标签: jquery

这么多天来我一直遇到一个特殊的问题。如果用户不小心/有意从文本框中删除了内容,并且新值不符合所需条件,我想关注内部的输入文本框。 我的HTMl是:

<div id="entryTbl">
   <table id = "usrdetails" border="1px" cellpadding="15px" align="center">
    <thead>
    <tr>
      <th>ENTRY NO</th>
      <th>USER ID</th>
      <th>USER NAME</th>
      <th>AGE</th>
      <th>BLOOD GROUP</th>
      <th>BLOOD TRANSACTION TYPE</th>
      <th>QTY</th>
      <th>LAST DONATION DATE</th>
      <th>TRANS DATE</th>
      <th>TRANS REASON</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td><label id="row10"><%=recordNo%></label></td>
      <td><input type="text" name="userid" id="row11" class="useridIn"/></td>
      <td><label id="row12" class="fullname"></label></td>
      <td><label id="row13" class="age"></label></td>
      <td><label id="row14" class="bloodgp"></label></td>
      <td><select id="row15" class="trans_opt" disabled>
          <option>---select a value---</option>
          <option value="Debit">D</option>
          <option value="Credit">C</option>
          </select>
      </td>
      <td><input type="text" name="trans_qty" id="row16" class = "trans_qty" disabled/></td>
      <td><label id="row17"></label></td>
      <td><input type="text" name="currtransdate" id="row18" class="curDate" disabled/></td>
      <td><input type="text" name="currtransreason" id="row19" class="trnReason" disabled/></td>
    </tr>
    </tbody>
   </table>
   </div>

我写的JQuery脚本是:

<script type="text/javascript">
      window.onload = function() {
      document.getElementById("row11").focus();
      };


    </script>

    <script type="text/javascript">
     $(document).ready(function(){
      var rowno = "";
      $("#recfrmdate").focusin(function(){
        //rowno++;
        alert(rowno);
        //var cont =$('#usrdetails tr:eq('+parseInt(rowno)+') td:eq(1) input').val();
        //var cont = $('#usrdetails').children('tr:eq(rowno)').children('td:eq(1)').children().val();
        var cont =  $("#usrdetails tr:eq(0) td:eq(1) input[type = 'text']").val();
        alert(cont);
        });

      $("#usrdetails").on("change",".useridIn",function(event){
            var $this = $(this); 
            var i = $this.val();
            var i_len = $this.val().length;
            var row1 = $this.closest('tr').children('td:eq(5)').children();
            //alert(i_len);
            //var row = $(this).closest('tr');
            if (i_len != 7)
             {
               //alert("It is someting else");
               //row1.val('');
               row1.prop('selectedIndex', 0);
               row1.prop('disabled', true);
               $this.closest('tr').children('td:eq(6)').children().val('');
               $this.closest('tr').children('td:eq(6)').children().prop('disabled', true);
               $this.closest('tr').children('td:eq(8)').children().val('');
               $this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
               rowno = $this.closest('tr').index();
               $("#recfrmdate").focus();
               //alert(rowno);
               //$this.prev().focus();
               //$this.closest('tr').children('td:eq(1)').children().focus();
             }
            else
             {
               //alert("It is exact SEVEN");
               row1.prop('disabled', false);
               //$("#recfrmdate").focus();
               row1.focus();
               //$this.next().focus();
             } 
         });  

       $("#usrdetails").on("change",".trans_opt",function(event){
         var $this = $(this); 
         if ($this.val() != "")
         {
           $this.closest('tr').children('td:eq(6)').children().prop('disabled', false);
           $this.closest('tr').children('td:eq(6)').children().focus();
         }
         else
         {
           $this.closest('tr').children('td:eq(6)').children().prop('disabled', true);
         }


       });

        $("#usrdetails").on("change",".trans_qty",function(event){
         var $this = $(this); 
         if ($this.val() != "")
         {
           $this.closest('tr').children('td:eq(8)').children().prop('disabled', false);
           $this.closest('tr').children('td:eq(8)').children().focus();
         }
         else
         {
           $this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
         }


       });

       $("#usrdetails").on("change",".curDate",function(event){
         var $this = $(this); 
         if ($this.val() != "")
         {
           $this.closest('tr').children('td:eq(9)').children().prop('disabled', false);
           $this.closest('tr').children('td:eq(9)').children().focus();
         }
         else
         {
           $this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
           //$this.focus();
         }


       });

       $("#usrdetails").on("blur",".trnReason",function(event){
         var $this = $(this); 
         if ($this.val() != "")
         {
           //$this.closest('tr').children('td:eq()').children().prop('disabled', false);
           //$this.closest('tr').children('td:eq(9)').children().focus();
         }
         else
         {
           //$this.closest('tr').children('td:eq(8)').children().prop('disabled', true);
           $this.closest('tr').children('td:eq(9)').children().focus();
         }


       });

      }); 





    </script>

脚本的第一部分将加载页面,并将焦点放在id ='row11'的输入框“ UserID”上,所有其他元素均被停用。获得正确的UserID值(即字符长度等于7)后,我会在“更改”事件中激活下一个下拉框。进一步在此下拉框的更改事件中,我激活下一个具有类“ trans_qty”的输入框,依此类推。    现在,假设用户更改了“ UserId”,并且新条目的字符长度不等于7,则应清除下拉框和其他输入文本框值并将其禁用,并应将注意力集中在USERID文本框上。通过使用DOM遍历的.focus()方法,它不会获得焦点。因此,我想改为使用#id将焦点放在顶部的日期文本框中,将行索引发送到公共变量“ rowno”,然后在Date输入文本框的focusin()事件中,我应该捕获UserID的值文本框,如果已捕获,则应将它放在focus()上。   我能够以警报的形式获取行索引,但无法获取UserID文本框的值。我已经尝试了DOM遍历的所有可能组合,这在我的脚本中可以看到,但是徒劳。我非常受够了。请帮助。

0 个答案:

没有答案