通过点击动态加载的表中同一行的另一个字段来更新一行的字段

下面我试图通过单击按钮将datepicker元素设置为输入字段。由于所有日期选择器都具有相同的类名，因此单击按钮会将其全部更改为输入字段。但是我想只改变那个按钮那一行中的那个datapicker。通过点击动态加载的表中同一行的另一个字段来更新一行的字段

HTML

<!DOCTYPE html> 
    <html> 
     <head> 
     <!--Import Google Icon Font--> 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <!--Import materialize.css--> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"> 
    <link rel="stylesheet" href="custom.css"> 
     <!--Let browser know website is optimized for mobile--> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
     </head> 

     <body> 

    <div> 
    <div class="row"> 
    <div class="input-field col s6 offset-s2"> 
     <input id="contact" type="text" class="validate"> 
     <label for="Contact">Enter contact name.</label> 
    </div> 

    <div class="md col s4"> 
    <a class="bt waves-effect waves-light btn">Search</a> 
    </div> 
    </div> 

    <div class="table-margin"> 
    <table id="mytable"> 
      <thead> 
      <tr> 
       <th data-field="id">Contact Name</th> 
       <th data-field="phone">Phone</th> 
       <th data-field="Data"> Data</th> 
       <th data-field="Action"> Action</th> 
      </tr> 
      </thead> 

      <tbody> 


      </tbody> 
     </table> 
     </div> 



     <!--Import jQuery before materialize.js--> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
     <script src="script.js"></script> 
     <script src="new.js"></script> 
     </body> 
    </html>

JS1

 $(document).ready(function() { 


      var status = [ 
         { 
         "id": 1, 
         "name": "sourabh", 
         "phone": "811880", 
         "email":"[email protected]" 
         }, 
         { 
         "id": 6, 
         "name": "sourabh", 
         "phone": "255888888", 
         "email": "[email protected]" 
         }, 
         { 
         "id": 6, 
         "name": "sourabh", 
         "phone": "255888888", 
         "email": "[email protected]" 
         }, 
         { 
         "id": 6, 
         "name": "sourabh", 
         "phone": "255888888", 
         "email": "[email protected]" 
         }]; 

     var len = status.length; 
     var x= '<input type="date" class="dt datepicker">'; 
     var y= '<button class="make waves-effect waves-light btn" type="button">Update</button>'; 
     data = ""; 
      if(len > 0){ 

      for (var i = 0; i < len; i++){ 
       data = data + "<tr><td>"+status[i].name+"</td><td>"+status[i].phone+"</td><td>"+x+"</td><td>"+y+"</td><tr>"; 
      } 

     } 

     $("#mytable tbody").append(data) 


     });

JS2。

 $(document).ready(function() { 

    $('.datepicker').pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     selectYears: 15 // Creates a dropdown of 15 years to control year 
     }); 


    $('.make').click(function(){ 
     var x = this.rowIndex; 
     console.log(x); 
     $('.dt').replaceWith($('<input type="text" value="Input box">')); 

    });});

来源

2016-05-17 scripter

使用$(this).closest("tr").find(".dt")，而不是$(".dt")所以只选择了同一行，你点击的元素在日期选择器。

来源

2016-05-17 21:53:46 Barmar

非常感谢。它运作良好。 – scripter

通过点击动态加载的表中同一行的另一个字段来更新一行的字段

回答

相关问题