CODEWITHSUNDEEP
javascriptjqueryhtml
scripter
scripter

Reputation: 1526

Update field of a row by clicking on another field of the same row in a table which is loaded dynamically

Below I am trying to make a datepicker element to an input field by clicking on a button. As all the datepickers have same class name, clicking on button is changing all the them to input field. But I want to change only that datapicker which is in the row of that button.

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">'));

     });});

Upvotes: 0

Views: 44

Answers (1)

Barmar
Barmar

Reputation: 781706

Use $(this).closest("tr").find(".dt") instead of $(".dt") so it only selects the datepicker in the same row as the element you clicked on.

Upvotes: 1

Related Questions