CODEWITHSUNDEEP
javascriptjqueryhtml
scripter
scripter

Reputation: 1526

How to create buttons and data picker using jquery?

I want to display an array of json data into a table. In each set of records I want add one datepicker and one button. Now If I click on that button I want the datapicker to be changed to just a Input field.

Example - data -- [ { "name": "sourabh", "phone": "255888888" }, { "name": "sourabh", "phone": "255888888" }];

In table it should display like this and cliking on update should change datapicker to input box. enter image description here

Upvotes: 0

Views: 36

Answers (1)

Vlad Krasovsky
Vlad Krasovsky

Reputation: 126

use method in the end of ready function

$(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">';
    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);
    
    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
    });
}); 
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js" ></script>

<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>

Upvotes: 0

Related Questions