How to add Datepicker in your Page and in a dynamically added textboxes.

Hi All!

Here's how to make datepicker in your textbox.

First add code below in your header:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Then add datepicker class in your texbox:
<input type="text" class="datepicker">

Then add code below in your script:
<script type="text/javascript">
   $(document).ready(function(){
        $(".datepicker").datepicker();
});

That's it. Datepicker should be showing.

But when adding textboxes dynamically, Here's how.

Make sure you added the headers above.
Create a div for your new textboxes and a button for adding function.
<div id="boxes">
</div>
<button Onclick="AddTextbox()">Add Textbox</button>

Then add code below in your script:

<script type="text/javascript">
$(document).ready(function(){
 
$("#boxes").delegate(".datepicker", "focusin", function () {
    $(this).datepicker();
});
});

function AddTextbox() {
        var txt= document.createElement("input");
         txt.type="text";
         txt.className = "datepicker";
         var div = document.getElementById('boxes');
    div.appendChild(txt);
}
</script>

And if you want to change the date format, add this line after $(this).datepicker();

$(this).datepicker("option", "dateFormat", "dd/mm/yy");

That's it.

Goodluck.

How to Add Tables in a Div Dynamically in Javascript

Hi All!

Here's how to add Tables dynamically in your page. First is to make a DIV for your tables and button for adding tables.

<div id="tables">
</div>

<button onClick="AddTab();">Add Table</button>

Then write below code in your script.

<script type="text/javascript">
function addTab(val) {
var table = document.createElement('table');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = 'Hi';

var div = document.getElementById('tables');
    div.appendChild(table);
</script>

And That's it.

Goodluck.

How to Add Cells of a Table through Javascript

Hi All!

Having problems in adding table cells dynamically?. Here's how.

Create your table and button for adding cells.

<table id="myTable">
           <tr>
          <td><strong>Title</strong></td>
          </tr>
</table>

<button onClick="AddCell()">Add Cell</button>

Then write the code below in your JavaScript script:

 function addCell() {
                var rowCount = document.getElementById('myTable').rows.length;
var table = document.getElementById("myTable");
var row = table.insertRow(rowCount);
                var cell1 = row.insertCell(0);
                 cell1.innerHTML = '<strong>Title</strong>';

}

And that's it.

You can also add class or id of the row by adding:
 row.id = 1
row.className = "class"

Or if your adding textboxes or any other form elements you can write:
cell1.innerHTML = '<input type="text" value="">';
cell1.innerHTML = '<select name="select1"><option value="Hi">Hi</option></select>';

Hope That helps!

Goodluck.