i m not able to make the following table dynamic using datatables plugin. here I am fetching json data using api and dynamically adding it to html table. i am not able to add datatables plugin and make it to work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid tracker</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive container">
<table class="table table-bordered table-hover ">
<thead class="table-dark">
<tr>
<th scope="col">Country</th>
<th scope="col">TotalConfirmed</th>
<th scope="col">TotalDeaths</th>
<th scope="col">TotalRecovered</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
<script>
tbody = document.getElementById("tbody");
text = "";
data();
async function data() {
api = await fetch("https://api.covid19api.com/summary");
result = await api.json();
populate(result);
}
function populate(data) {
for (let x of data.Countries) {
text += ` <tr><td class="table-warning">${x.Country}</td><td class="table-danger">${x.TotalConfirmed}</td><td class="table-success">${x.TotalDeaths}</td><td class="table-primary">${x.TotalRecovered}</td></tr > `;
tbody.innerHTML = text;
}
}
</script>
</html>
The URL you are using already returns data as JSON:
{
"ID": "028dd159-922a-41cf-a768-892259b0adab",
"Message": "",
"Global": {
"NewConfirmed": 307033,
"TotalConfirmed": 171061979,
"NewDeaths": 12153,
"TotalDeaths": 3562587,
"NewRecovered": 428741,
"TotalRecovered": 108837399,
"Date": "2021-06-02T14:23:45.417Z"
},
"Countries": [
{
"ID": "35c3910f-e19a-48b4-afba-549e22cd4aac",
"Country": "Afghanistan",
"CountryCode": "AF",
"Slug": "afghanistan",
"NewConfirmed": 0,
"TotalConfirmed": 72977,
"NewDeaths": 0,
"TotalDeaths": 2973,
"NewRecovered": 0,
"TotalRecovered": 57741,
"Date": "2021-06-02T14:23:45.417Z",
"Premium": {}
},
...
],
"Date": "2021-06-02T14:23:45.417Z"
}
DataTables handles JSON out-of-the-box, so there is no need for any additional handler logic.
Your HTML table should be given an ID, so that DataTables can refer to it:
<table id="example" ...>
Your resource references in the page header appear to be completely missing what you need to support DataTables. You can go to the official download page, and select the ones you want to use.
Your page is missing the DataTables object, which points to the HTML table you want to use:
$('#example').DataTable( {...} );
Here is an example:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "https://api.covid19api.com/summary",
"dataSrc": "Countries"
},
"columns": [
{ data: "Country", className: 'table-warning' },
{ data: "TotalConfirmed", className: 'table-danger' },
{ data: "TotalDeaths", className: 'table-success' },
{ data: "TotalRecovered", className: 'table-primary' }
]
} );
} );
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Covid tracker</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="table-responsive container">
<table id="example" class="table table-bordered table-hover ">
<thead class="table-dark">
<tr>
<th scope="col">Country</th>
<th scope="col">TotalConfirmed</th>
<th scope="col">TotalDeaths</th>
<th scope="col">TotalRecovered</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
</html>
Beyond that, you can explore the many examples on the official web site.
Related
I am trying to use DataTables with Tabledit , but I am getting "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags are also matching.
To make it work if I comment the "editable" object it doesn't show any error. How can i make it work? But this part is required by the lib as it will make only those column editable.
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<script>
$(document).ready(function () {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", baseurl, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var persons = JSON.parse(xmlhttp.responseText);
$.fn.dataTable.ext.errMode = 'none';
$("#example").DataTable({
data: persons,
"columns": [{
"data": "id"
},
{
"data": "username"
},
{
"data": "email"
},
{
"data": "avatar"
}
]
});
}
};
xmlhttp.send();
$('#example').Tabledit({
url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
You can re-structure how your DataTable calls its Ajax data, by using the DataTables built-in support for Ajax.
You can then apply the Tabledit functionality to the resulting DataTable, using the initComplete option.
$(document).ready(function() {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
$("#example").DataTable({
ajax: {
url: baseurl,
dataSrc: ""
},
columns: [{
data: "id"
},
{
data: "username"
},
{
data: "email"
},
{
data: "avatar"
}
],
initComplete: function(settings, json) {
$('#example').Tabledit({
//url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
}
});
});
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Now, if you run the above code snippet, and then double-click on a value in the username or email columns, the cell will become editable.
Note - I commented out your action.php option because I do not have that file. So, edits are not sent/saved anywhere.
I have created a website mainly using HTML, CSS, PHP and MYSQL. I have successfully gotten tabledit working on the site, but I am not sure how to add the functionality for dropdown checkboxes. I need it to show as checked if the user has the role and when unchecked to update the MySQL table. Are dropdown checkboxes something that can be implemented with this plugin?
This is how the HTML is set up:
ModifyUser.php
<html>
<head>
<title>Modifying Users</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
#sample_data tr > *:nth-child(1) {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Modifying Users</h3>
<br />
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th> // COLUMN THAT SHOULD HAVE DROPDOWN CHECKBOX
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
[5, 'role_id'] // THIS SHOULD BE AN EDITABLE DROPDOWN CHECKBOX
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
</script>
I'm using DataTables to display my data. I specify its width to be 4 bootstrap columns. My table now has this unwanted horizontal scroll at the bottom although all data can fit in the specified width:
Scrolling to the right, I see that the search box at the top is the reason for this scrolling:
What makes the box lie too far right? How do I fix this?
$(document).ready(function () {
var data = [
{ title: "The Godfather"},
{ title: "The Shawshank Redemption"},
{ title: "The Lord of the Rings: The Return of the King"},
{ title: "The Godfather: Part II"},
{ title: "Shichinin no samurai"},
{ title: "Buono, il brutto, il cattivo, Il"},
{ title: "Casablanca"},
{ title: "The Lord of the Rings: The Fellowship of the Ring"},
{ title: "The Lord of the Rings: The Two Towers"},
{ title: "Pulp Fiction"}
];
var table = d3.select("#myTable");
var rows = table
.select('tbody')
.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows
.selectAll('td')
.data(function (data_row) {
return [data_row['title']];
})
.enter()
.append('td')
.text(function (d) {
return d;
});
$('#myTable').DataTable({
scrollY: '60vh',
paging : false,
});
});
body {
padding-top: 1%;
padding-bottom: 1%;
background: #585858 !important;
color: white;
}
<!DOCTYPE html>
<head>
<title>Data Tabke</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome lib -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- dataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="FilterableTable" class="col-4">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="myTable">
<thead class='thead-dark'>
<tr>
<th>My data</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="FilterableTable2" class="col-8">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="otherTable">
<thead class='thead-dark'>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<!-- dataTable -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js"></script>
</body>
UPDATE with snippet.
I have found a way to resolve this using DOM positioning of DataTables itself. I need to specify the structure of the table as <f>ti when initializing the table:
$('#myTable').DataTable({
scrollY: '60vh',
paging : false,
dom : "<f>ti"
});
and then style the searchbox to float left as:
#myTable_filter {
float: left !important;
}
The id myTable_filter is autogenerated by DataTables, so I need to check the correct ID of the element in Chrome.
Explanation of the <f>ti bit:
First, wrap the search box (the f element, or Filtering, according to DataTables documentation) in a div with < and >.
Put it before the table, or the t element.
The information element (the i) comes last. This is the info line that says "Showing 1 to x of x entries"
$(document).ready(function() {
var data = [{
title: "The Godfather"
},
{
title: "The Shawshank Redemption"
},
{
title: "The Lord of the Rings: The Return of the King"
},
{
title: "The Godfather: Part II"
},
{
title: "Shichinin no samurai"
},
{
title: "Buono, il brutto, il cattivo, Il"
},
{
title: "Casablanca"
},
{
title: "The Lord of the Rings: The Fellowship of the Ring"
},
{
title: "The Lord of the Rings: The Two Towers"
},
{
title: "Pulp Fiction"
}
];
var table = d3.select("#myTable");
var rows = table
.select('tbody')
.selectAll('tr')
.data(data)
.enter()
.append('tr');
var cells = rows
.selectAll('td')
.data(function(data_row) {
return [data_row['title']];
})
.enter()
.append('td')
.text(function(d) {
return d;
});
$('#myTable').DataTable({
scrollY: '60vh',
paging: false,
});
});
body {
padding-top: 1%;
padding-bottom: 1%;
background: #585858 !important;
color: white;
}
#myTable_info {
white-space: normal;
}
.dataTables_wrapper .row:first-child div:first-child {
width: 0;
max-width: 0;
padding: 0;
}
.dataTables_wrapper .row:first-child div:nth-child(2) {
min-width: 100%;
padding:0;
}
div.dataTables_wrapper div.dataTables_filter input {
width: calc(100% - 58px) !important;
max-width: 320px;
}
#myTable_filter {
min-width: 100%;
}
.dataTables_wrapper .row:nth-child(3) div:nth-child(1) {
min-width: 100%
}
<!DOCTYPE html>
<head>
<title>Data Tabke</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome lib -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- dataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="FilterableTable" class="col-4">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="myTable">
<thead class='thead-dark'>
<tr>
<th>My data</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="FilterableTable2" class="col-8">
<div class="table-responsive">
<table class="table table-striped table-dark table-hover table-fit" id="otherTable">
<thead class='thead-dark'>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- dataTable -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js"></script>
</body>
Im a newbie. The data already display in the table even the image. but the problem is when i use div id and call this id for using the display of my image from json file. it didnt show the image in div. Any help? Thanks.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Show JSON Data in Jquery Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h1 align="center">Show JSON Data in Jquery Datatables</h3><br />
<h3 align="center">Employee Database</h3><br />
<table id="data-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Designation</th>
<th>Image Path</th>
<th>Support</th>
</tr>
</thead>
</table>
</div>
<label for="name" id="name">Name</label>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
<script>
$(document).ready(function(){
var table= $('#data-table').DataTable({
"ajax" : "employee_data.json",
"columns" : [
{ "data" : "name" },
{ "data" : "gender"}
]
});
$('#data-table tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
} );
});
</script>
JSON FILE
{"data":[{"name":"dfghj","gender":"asdfg","designation":"dfgh","image":"<img src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAARIAAAC4CAMAAAAYGZMtAAAAqFBMVEX\/\/\/\/MAADNAwPRAADPAADJAADNAgPNCAjOFBT77u7OERHUISH99fXNCwvQIyPNDg7TGhr++vrOGxv11tbRLCz66urXOzvWT0\/SMTHVKyv99PTQISHTPz\/55+f23NzTNTXVSUnyysrZX1\/rq6vvwsLaTk7nmZnif3\/bWVnsuLjkiYnmkpLgbm7moKDYRUXgd3fgg4PeZmbqp6fts7PdcXHdV1feX17lfHy4OLf0AAAeNElEQVR4nO1diWKiSBBNpbsFQVCRcEQUTzxQFK\/8\/59tVbfmmJl4EBMzs6ndnR1vKKpevTq6ubv7kR\/5kR\/5kR\/5katKvdK+9SF8K2lNTTNkw8dbH8e3kXXGUAybhfVbH8q3kPYIteFZBmOh2XFvfTS3l3p\/AoxpuVkLGasxgzdufUQ3lvYTRz1YNWYyHs7tSDNZeutjuqVU+i6TooUsn6F11Df4wPv\/Imx7xjnpI2CMm6v9kyk+6N\/0sG4nE2PMpoa0ET7rPj\/9iI+zGx7WzaTb73qzwRDh1OP2vPL6pZyH7H8HsJV+wPnMnftmaL02ECVdXuOjmxzXzaSbA2c7NtzmGGJWf0DSmhfz\/xFde5ybnPWQkSGA8PxXA1GyQm9af\/Fx3Uy6iyBH9JxSoGVJ+Z13VTTGoi89rlvJw7THDXcs1cF7fzYQJQ0Mzf9+Rlxvp4iaCRF2xu13DWQvhhasjr\/jr5fWXGOpydiSl04YiBLvH6cm9XY25DNOHhNua8k5ZD1hGv93ARYdJjW0Ts42fsjHZ1Kwshuy5ece181kPcW0n8UBMzvcTB7O\/lyXMTj\/3X+PNFqIpMzNn4bch9ngos9irP7nSgSVdYezklGbMY+z7bp14ccbjC3+LQbbeuKZxFMMukP\/MgNRMmPxP5T7Pa6ayMaIgZgxN9NimDDgbHbl47qZNBAGajVUCdJynhe+0nWfZf8Egy0PMmAlZrFFj3n29FIEeS0Di02udlw3k27O3Z3GFguO9jEsgiCvpP7EF9c5rJtJeR5SITVHhwkS\/iEDkVJpWeyDWr2tDGbcqNn70nJ2lVhRX4Z\/b3HtIZmGCCDhxjYzO1t+2ECUVMosv9JXfbUMtmgctRJjXlxjiytCYpJ7yfW+7cuklTJuyb4D\/bu8al6yiji75vd9hdQnHUJUyw5JKdm10\/lpLcz+LoBtLzVPdS+DkPPRxbyqvD7hZG3mLsdFj+7rpT6ZkX24nEXoMdHlBtJdCBAn3pOZBj9Rkvw28tj32PaJMQPTmFlYwEASR3SgJE6UHCc84n8FwJZXnmkuVtPhLDYZ9y5vaXfHXQDY4n8nWhN1CmUFj\/LL5KHf2CCiDmf51NUwxBQzEJEHYKFGenDi4yN0ytPF6xtKdxoyPptwtpuuuBlyb31xkaebgwdV2CxAq9qgwwl62kb1f9sSQXk9zuQsSHTHNzU25NnlBlKZ2wJtw0fz6IHj4l9dcUKpESvBt5y\/aScR1LJayUClhAm1MPP+xQZSyQVEBtxDLwKxBJih3\/TghFsMeGbMix72p0k7DWssZGaG4SVjQY4IsimU1tmgNatwfw8RgD2DDLLoJBGr00Uo8mOfJ+2pScN1bFhTpKw2McNJ5fTn\/iQrMHwPrcRAjTizQJyVHi4QYL9RDbadWDVShRmaNvHUKoLrovjxVQS4GqrEysCF\/Mz0sG0y9l1KBA9JzEus6iM5LWUZi2vIQXarD\/URNoCug\/+5GIGX52bMiFz8OwBspd8qKU9hKVqHOWbDsFQAQdZvolJDRJmHkBpgzBmc299c8ZDffoqg298122gcplLKuGn1vNHlCNJedsTmzTP22N0glBCgxJ0zq0MVdFz70p++rjykITdYWN8bCXJUtNwCCDLpCAdg+EaRfQJWAMsGw8sO\/c1Tvrhh4U0BduJLPmayFmOaxViM+vBWlxtIqokmBtoA3mRAFYCNhSaiB2AYKg1uj+Ynvr0BJtscf8vnCUZcRJCxGY401lZzy3yxuTzHQANpEpAmyE+DN6+MNFtHfAWkfhRz6oOFEOkpKmZiGlEw7n9QBkPOsjEG29UYmVmDezTFPS9SrsDzzZC3V2NHB\/HG5ssATgBjfDEzYDYF0fOQ1Z\/4urnP2A0myFupqawiDamKOnya45\/vzGCelIlK\/S1wETjetqdiwFyvp8G4EwAlOZACiBPJ0mMUsLjYkRSXrkIQpKk7ZvH5ZMejCZsXZwOx7qJ\/OONqUALx5mv6VBGADZRmm40qmSC05Ce+bvbVDLaiunQHMXecpUn\/Q\/W9KVg+niqefbX61gbqAvQoAte30FrQjizKecSJH+vi8T195Hguk\/aC9LHdZzDIUFkQz4rMP5TLLyf2IGCDdAxGAqrwtt4xAnSmUQfDcAKG3iSKAuIkwFr2l02QD1QNhA2HzDM98htW213eJ2ivh7omnKB30IoPxhKxwpojDcnfmElb9ELM+xynmY11HUJUSOdUGL6b4yF+yYBjpRu8cpiaYT1l3L5gxG4vD4krBEZWAy1C7A98IKyxGIeAzCT13pIKdBv0FehgfPY6IMTsDJR45F8yQd4e1Wolxocs0KyI\/oIh53IOUh9sqVCm6egAmoawsP8GpB1zjC65rxv3bytna8yHQev5qZYsNumZeWQPAfaz52+6Y5YuYub1e\/4IA00tmQ9Lp6a4f5dWN0GFNIloUG0IBXT1yqAXCh1hoxP\/GmTr4Gqa4Th9\/KQ4t3FFAPvJJYLlU6k+oPn+lIeY36Gnji9HkMFYzJcURmEh8OxRH6gTobLWluiMdbBCjLNIQt58bCSQx3mwRES5F+eWCGrM+MT2cKVVzwdTts4ww6Tl26zJtPTioYUHzGJAPGzA3vXiZL4hzRikFku9Pia7gXtjBlXtLYNtNyOftNGRNcczfy5h2qcBbCvdoSYink\/QFm029A0+vpykNsYCr36QpbsoivqxjVi5sR1pJ\/sLPxAKRpv059s43JktfSQlGRqLZp+JEGX+WQsN6skjMnbMXry7TC29HF08pEvSoBCzmeiY6oIdUcBRPNSD0uHCQ4a+BDOpmLcMdu3GY3o2ppz4uTpUOY5kBLCfMn\/zsFM8hE+60Kwxvi06qzDOYBkLMDpUXl4+3pV1m85Sw390deGTaoRJzGIJ9yWYveFideF3SH+RTQ0\/FXJaixMdrAEe+LTgwR4TdJYaEVU+vss8Xp1ezEHKh3MbkFUgfuqkCDrUQY+esUsRBKqE+ADNHLRgRCz2F8gYORvisG7kWDr5WX0dlUTbP\/7TjFmzqzLYx2me7nrM1pCS0cB+ZTS9fIKquxHPSAmUyErwADUTEYGjBwgRkIE68rGYQFUPe3Dvw9vZ77aInQCJK\/6hQ6c1AnS8dCKOW2zKLLhi7tdaqPlcw2WZyWZxkRy3PK+K2Hhu4i4hKikmgqqhWDCnbAXuPYieARYT\/wjxVQvs7K1bREHPIacZU\/MP4QhiI4DOcTNpcT64mpU0EEBCZj5T99\/WKp8h3VzQ+Rkg9vlIWyhuRoYCFAsqIpTRpdo88JBq00feTg5lQfyWwaIe7hUi3wPV2UR\/DIvFcfgcsyS8DsAOfMr4NY3NfVlZZpenuY9z2wCthCdQuocDmmQHlZDrEKJudEnXPKSy6vwTkTkeWkBGYPK2LEboatSoe3EPIX5ggiEsHR9PiAlgr7FEZ42ZC9oHd8csX2icdy53R2kgnuaAQxHieQuaiXhWyb2gUaGBshtiYepHysL3PbQHhxTQfPOd0wBKWkCtcsldGhuBenH8445BFn7x0f8ilcTY0qqH2jbiAee5V2RId0ako0RGniOCBu7zMBU8m4km7aIlno1mj9zoMzapY4bO9XYGqz1TTKZPzb8dEr+qDsI5Ma4yxUv7sQHHhxHlSozXasxLRv1Bt1gqOaeD3l\/\/UjoH7VAWnD6DiS4BdvL8GPYH3hWUEN5TcPq1mojpoI6KznMQozYGcyGmJxGuhefzkQHHxg6YaYbj6XzQKgbUFeX+6OXVmic56OhuiiZj7Glm6wVgwfLqiXxI6jEOEHznuDnNCUSkEth\/rCtfnAjZ8wPH6t4h3thnFXqHjIWFC8Ld5WY+aXykftpeCq7g7kDWxfwup\/9XDyjY2auEvAOlEVGeh8ghnkEwkewFtpQByupSee7vQ7SMNqiTfqUk8jPtF5nm+Fb739RXYXUL+zLxmFIRhMjpnS8cKhU5hyMU+xiMwRfVIro9spH4VRGkLGAEup4FZGQhAXWzeq+yN+l2MGoPTi62fyUYKG6zaqkxy5qOZOo9epjgtdQXSB3QMzSn+gopJa0IFFSgzkSyobLQ67piroC5Bxi9CVdIhMR45DWYIUaXtYrKnneDVUv1dSDdBK+hpUmO3R01iWxN18rS0RMOVJSuNGypxChdRod8KeDNZezKHFkjKymBE0EmVgAqB+qAMC4t9D5GbfOrW6GNhZBOXpKnP4PqHSWu5C1NPLvq3lHEK4Cl5A+qFlhoL47Qf73oDgRjBUXgz0YQ60RmJdxP\/AIkemhePjb4MZnqEvQ0gga0EoRNQkpZ\/mpK7nqvovEBYH3JtGSc0ajq\/rujz0Ent0qRnNpiTl6mP5fxL5dGXnR7sXq9UkyXbVnHAE3Di06nHtjk+CmxrYVShi\/N5zDEvWew0s8g+hMPRIDVY0KTcgKaq5FFne6Lv3NWtKfUafby28dajXUynReu72dIIzq6qi1TuhaCrwBhbkvr15bSr94yWIJXspQ\/XoZZjATEHhDdh2aTQnK4LHJ4jSdMz0w418Ae6\/WHxmS+7NFSw+Bk7+yITIQGdmRQzq43UQsdB2lEResFhCQdGVhswtLe\/v2psp2X3O836VK73ClPOc3MayAKrWMiA6HF+nCm27R9u8a4nJDh\/PIRu\/obAAAZOfDYETzcQBbKMKFryPaVDDAwJUZ24KetV7nfO\/7ggEa9HIjnQkAxA9k8Ac2a8uFZXlOZs5rBPYNZBuPx5XDcWIrm63lBddqQurChJmXTAX+pBkaasMxIYbF8x2GVjK\/itcST6I+XY06jSA5yWndaCFYHHuXyBmOzs9TZGlXRnnI1e1jAQPqe5A2v8gYZV3VIbHBjq5oFVPwijETzh6gvDOSxvmSzhwMWJeOQ2\/T+OFH2KGSRCKZFDKT9VDLlYDYfnUVhBn0+k\/s\/oNgFRuxkzZPK6q+rgB010U2BJ8Z8DQ2j16iIkQs9X7REilhJTDR7BbAKSTL6xB+NNPFBxJcvU0FZ57QoDM8uOWsDpcpcg9xmXpOZbgEEuevH1JxSNv+6ljGRfmHvqboYtuogBpEfgOMsuiN8Qcco6jwXE\/cAqyAW\/jiy24XLl6ncEWvUuNwAhQdn5TWN1DCZGdNK1D9vc3hc2qMmzVp68syJgL56TRqOKqM2\/XQOfYSRpTcizE3bVBvQ7WoGLwwWDmhivQewRfL5yuApnw2zLDLPI7mTDLJQLlZm7HLuUllnM+GAyuqJluoGvKppqhSVOnW2N8E0mMDFDijZhegOGYil0YTR\/TPAbkBOV6mC43UHHh5b3bN6ka3UVjNlCCJhEQ7Soiqqti9XoHt0QLfEyy+3VGGRrEi0aRjExUdEytE06n0ho20EL5Y1oPUThzh8i0VngyfObLVguQC5lVJxqD0NOmnE0ChWRD686qH44GzQGAzQtimaQBWhNSfWWY0RcxzK9l0EE+e5E5WDJuuvUsVfPrKbWuQs0mnM4jOYC2LVIK+7YePfiGu8GvSYyGER1FonhrLsXoYQj6gcjc6yIOhtwnMx5U6Wzqhm4L0PsJ8nDRpdDmosYHz5kZWiXVCNOQg0QhKQLfxXAVTTPKIjPtLNSV8Qp3CsqazST+\/aSE0cFXYPzvaAocvA2KxJDPrYKV4o5X2vjseDj5lng4aWqblyX0XIMKjzhnb\/MveUyvGZoO0SoEZOD+5tA5oL0tvdHRWR1RDWMyb3MC9aqokbOLU+\/F2ZDL1Fsp5PLmqrrLjcSrfoFPeLVCRG0pSDvavGsgB4fx+\/RIsHCrVxMqWiYLshRhrSEAhykBGlb4HKfKWCpNDScI8q86TKQss1H6aU5iaYpxkXkX7aSjc4i8a9kkp3PZ3ko7c9nJ7lQGjQeu7OCIOHbqFSvNrLmLqfuW6CkccJxIjQown7HhVlorEsJUnPOQAszTlrpMACSRamFY3dLg9NLVh4lptf5AC0svqya\/C47pSWAi9w1xWdVznCsgOU4+PV7jSEwpUS2OIZGgcAayqSWHkg6pUFaJEqEo17MwJnpRJ4YbCJqtAXWir7sFxwc+pZrGYmbHuhB1RQJe4FNfv2Rqw2msDT38ks\/+WVyZLGqUglYjCl+rnyg5fxqRH0XJC7AqAlkHKqsvoYZQ6V1p+7N2KvZkwLhVcI4CadRbxlbLUxGbdXl7dnJ2atlJ3b9Gj1BERzPJsdBVQLT+iFejyQaTga1GxI6lQDuFczRc9Ei2ZSZcfKitCdontDKc3RSAnRPjPqwQvAnjPi\/LukQ84mKa2KGq1ZUkSl7Yix3DvvvXPR1MEbAeniHoZULbZeWswlcgRXTUxNU1RcCmEE1nO4aAlb9bMwLjXQLnSNvoio3YTGm9XwEZqaVuAsDjLwtyl0HrsyZrgFm7R3GbOr8Vlw0hNDvOzUjaJwW4KI2MVLmF0gPQXETVeH8uP8MRVtcHIk7M+sYqy4KFnQgiaOILDxWxyb7ALtCmr4+V0TCjfyaVMpZqU5788xzJyxmfR7MsEgFZ8z6ihH5hBAJnROFBtLDrWknk+gTzSi6SmsuOsnIAx82XCeu7kDW7mKiykhXr8AuSyaGTRtwjJkspj1UnIken\/+\/RPSTWXGavFs0VtvzisOvSdUO2Odk29byoCJjCvuCIjt+6wpoQKeZ2nbvlxBhPxVTFW9VaM6iPuyWEhlyug7oehLjg+Wk+wrcAiw6IqdVBSiSK20lO2YxdjSMk1Yf3Rfn4QSHH4q6nQFcSnqN4rVQ3fn5nLBGNrEy+C21VFlZ7mVG4KDXE5GLe5DrXBNz5At+FXiKz7R+Y5hKXYqC9KdbpHBhMFgxHnEvVKNjWbe6Z0pTgqNTc8YOwFFY+rTSiigFakpDQmhFSBBeZlS61E40fxO446WeGJmq5Wgqhki6e\/bAg+YJDfVFBEpskV5DGi6K4PMWhQzkIeU7oZTnU9LzEcIWV9lZnPB2NDjx5fr12mahczEkFzqUYRo9Ll4sxhrLt\/QbHRnlAJTHkgNzEUddbXX95igA3Qdn6dmfSob4ZonQ3nl8mUqKIPc53QPOqZlhKnplZq7DWawYX4cYakGVMXoWQ3UjO4MiRT8MghNfAuvPw2\/UxzqENSg68xeFrEiQVuoGqIqguhQol0lTm6F9o7U2xhi1ObJTaRlmytuqkdLz6Z8e+wtqJJITofkao6uYfu\/ow8hZVJeCTBoi4O2kN2ZgApoB8CJYK2q7yUCWFQRkRnhJEUubnvBniLm8rBEa\/eLLO04Iv0n5Hql4xtroUp6kYJPWR\/+U0HUF37jUQ6LyLLHDOgDW6mYffqXCs2OoSSzGXqc0yKrIufymNRgafJ1rTZTi7OvvCKtzqucbVlw7D1y9JZUgjjw3ljnPH3soWlU7y1Y3Q3GufSQnuTq+yWq5bAKWokQxF2QJspWoTpet4choZSPedLnQYmZ8+vPhyzxB4bB0UBMialTVYASiHiUTLrt3w5kkBGNp7AU2wLpB1XNeokovaye6XlySS++Z1x0GqqSmLSnJW2h1DO6wDufsi9nS\/X3jm3TR\/gqmUlvIyumIOZCOOl08gpiH0U+pgqjEedynoQaWYGdjGVgUelfF3ywrLRDPe5Ch9rNaV\/LwDQQQrQJcvfPWiS\/ofp86eheOH6Op0oWMEMfGtLKF2L4kRDB\/FkrQTPRwHMsVTXEP\/1oC8E6k1OZCjIcn6AmEgVWQtLcvcdpI+mgxgxK7Ibp521oNIBozJl5bJ0gjbdYkq\/6gaLyKdVRaUWDfSDQS3At9ZqhFpX1ZH0k7AyfxzhXwgGhXb6W+o769zw0jVLc3xJ1D\/nwc2czN7nxNEx7x5KDGPURQMeBYLMIoBlTDlgCtcxujwsDQaVD695WUAyWsAJVNZLDFPSWshCFFrrVV8NwYu+GIfW46ZYFxaopF0iX5i16o2P7ElDvNsiqOoxtDCvSF1QnG+LmIaAIhAqXgiyBKIg8FQvQFam1DNWQ6BdaCUmhlgejTVgbUpvb6H\/+FmCPXGfMTY\/Wwqn9Euu0xH0WgWVXDwubX0Zx72xoSiVR+f0+weeaGUQ7jZoZzsmNWN+Tygq5pMv4VmPGLmQ2K4RDl8uGhRbrrPix90zAVXV1kaDT6AS2wX2MjoFBSFWRFxD2aAkzTRnK\/HcAVFoLelFMCUCRsl8jkduMh9R9IwvJPt1jnn+ZbirCp+HRUkN5RgmMq4Gj+\/sVY6AaWiVF2Ymu96pyyfc+cZGrA7qJEP0iYFjp54AmYmKyO2QmZ7yUfuG2zztO12A3PP6u8mDqe0M8S0rmqCi9hI6sOjZlLaxF257FNB0BjlISjTNCsip0N4rGjPNov3awVDO17uxrb6i25p0dZk\/TM8qw9fZkPttWn5d70zJDV9XOQG3Nc19CUqIKjBhze4Wi5drlm8jbbpmh1TRikl9\/4wW5e8Il21e057YOLq1W1DBzkUvxqBwZwk6Brkr1JoXuRtFYsF2N7fxGFjCNtkThX+kxB5mqEaQzb3L2QMl93dVBdenQk+RK9TltqZmrIqsoWhKu9GkGs+SWWLO9lonu8Da3ICxLWGezc2q5jZ6QJ0xcpVoj98mnMrFrSE9S+0ec3KDpne\/e0CYoYRajcXj9Fu08frPdFHeMbek+Eqcy7YekKoL94O4Gqi4CbN4dCZXEyNVWHlVX\/7BE4rTU1xHjaWvIh7WaZZme1Vpe2sS\/pnT3O6Ed320MDQRoi0gw6BGVzgCm3c5hc5lOj7qcG1FsSHfEuIGAtqrPlgSobpTceMN4GwHWZOzY1vZr6Mjspefsxx5oBq\/3YIOtVmPdJTSrWeiGR\/W1Bx43WUn3wkXk5RZnTze\/e9pKbti7tY4UdyYiCBE+dBqp2dETPo3QZJT9KDTtFhzzb0uz2HoG\/c8uNTCjWd9mp803onao7WTHlrohetpEWDeOrDFXIGwKtZ2T6ltWCq2AWitGVsr2TMDMJ9\/kHjZP8o7ncXzkcFKqvqoFiuBM+rRGMwdYwck9Ed+X9hKjf0xboExrzK4xi3sfv\/XateSBMQuv17b0\/lvKYj8XQkkfaUPvTjHHHZ\/YO+V9mcjtCzNqPFQ3GrNNHn2rmw1iHI5rZnZsnmEkF8\/cw4h0Ygi77YsIE+Fip4EGwgK1A6qUgPHRN9ozn2QSDI1Rh5lHkr+ykCuIwKcqM0z7PaqgFRvDnBxyOkPdfA2N5RPaDx8Vi4p4LNSP+PJqXAUdjIjGIPp9whSxKIAjranGWa5Usg3IVPjuW961Jgnk+gL\/WK2+J1vmkNnNbovg1S4AI\/VE8sKgJEvtYdNlYcH74X66PA6p+s340d3GNvuyQKsNQqSXK6Q1RQIif0c6C4v56OlbQepbyZkrc8+jJ9rIURfTVh\/y9eUus26nnEULZhzu5qCx7xNz\/yQN3pS7Cp6ort09tFr1AidCI3Z5hTOeHLbaKrLE9IvF1ZjsEHyGZw9o0\/FSSDvLPCGyzua8yF0cvlzWnG2ISV791nYPaY1Ltj7tDnimrbkR1L9DGnNaMNGJXWT25nW\/drClGycttoZlMLMLQ0zrCtzF4UYyRZ0Md1fdt\/4hIXZqmQFfup7HeL2RfGCB2NcLbatFE2BX21Z5sOPcMzu2WdrH3b\/v7uBj9HiN1Y42\/s6WciL1EL\/s5siNvwBRf5EuN+VA3BVcfTBGk9Mz\/L7I25vI01+DIK9FHrz3YfsuJ3RrPrQQ7lqoYiSsTC80\/fwNhLa3rLHxxzynmwN+iRUYrOYjadcYfzpvZ4zvKYq\/msVNvDwPmBazzGBj5lloHiYPPnbfk1vLWrl90ZjTzTllLmuXRVRrIOf5G0jqUXmYDuXaliKfrQyCgOe0H2w0DWXFjGeFNhr5ZuKNqwgnBW6C0e3Ftdjga672GbLYdyotf0gmqvF3YZ5TWdn0uZqbEhRh7s\/hi2aovkKYRpuHXzRcJm+mrcrK\/ZhpGGLcW7Zzry4pC3aadf6tQx\/XAe2hJKfJEJcx6Gp\/PaL+Ig8yjz93MSZNULEx7Tru001gGF\/4fzEFeU9yWQE8586rjyt1d76FLIY0S4yH\/5TDPIuarDi9F2R3Rvs\/jLeMT1hosJCz79abup7I5sWJu7jVV83E27fp5M5j8TUXk307oS3ZvKPZcHvRpK1PjBkzMVH0trxzq22pv0jqnPX8Ixt5rDJuyraDMabQy4fzb9qauqKMKKq+s4FXa0N+pUmV2AGrGddeW\/c9pQUT9sebqVb64WgncyBZWOG16T8LqL9Kj1LY355tLWhKaMiGPtUOufb\/0QdKw\/u9w9UKn+cfauP\/k33sJcC87Zdz7vr9GmrFYgZ3\/x\/48YuU18NfeEbX21Cay8fzfyPlv4J0AUy2mPwVfcsvksr6C1bV\/ciP\/MiP\/MiP\/MiP\/MiP\/Mgp+Q+9BTszP\/NePQAAAABJRU5ErkJggg==\">"}]}
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":"sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
}];
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">'));
});});
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.