Showing posts with label using. Show all posts

How to redirect a page using JavaScript or JQuery

In this article i am going to explain how to redirect a page using javaScript or JQuery.

It is better to use JavaScript to redirect a page than using JQuery as JavaScript is simple compared to JQuery.

Example:

You can use any of the following code to redirect a page using JavaScript

// similar behavior as an HTTP redirect
window.location.replace("http://yourdomain.com");

// similar behavior as clicking on a link
window.location.href = "http://yourdomain.com";

Both lines mentioned above redirects the page to location given in parenthesis. Only difference is window.locaiton.replace does not put the new page in session history. That means once you redirected to new page then you will not be able to go back to old page using browser's back button.

Where as if you use window.location.href new page will be stored in the session so that you can be able to go back to old page using browser's back button.

I have added an example in JSFiddle. You can check in this link Redirect page using JavaScript

Redirect page using JQuery

Use the following code to redirect a page using JQuery

$(location).attr('href', 'http://yourDomain.com')

In this way you can redirect a page using JavaScript or JQuery.

For more posts on JavaScript visit JavaScript

For more posts on JQuery visit JQuery

Create table dynamically using JavaScript

In this article i am going to show you How to create a table dynamically using JavaScript

Consider you have following html

<html>
 <body>
   <div id="table-container">
   
   </div>
 </body>
</html>

Now you can create table dynamically using following JavaScript

var table = document.createElement("table"); // creating table dynamically
var tableBody= document.createElement("tbody"); // creating table body dynamically
var row = document.createElement("tr"); // creating table row dynamically
var cell1 = document.createElement("td"); // creating table cell dynamically
cell1.innerHTML = "Name";

// append cell to row. (you can create any number of cells and then append to row)
row.appendChild(cell1);

// append row to table body
tableBody.appendChild(row);

// finally append table body to table
table.appendChild(tableBody);

So, by above JavaScript code we have created a table dynamically.

Now let's append the dynamically created table to div.

var container = document.getElementById("table-container");
container.appendChild(table);

We added dynamically created table to container.

In this way we can create a table dynamically using Javascript

Also check : Create table dynamically using JQuery

Dynamically add or delete rows to table using Javascript

In this article i am going to show you How to dynamically add or remove(delete) rows from table using Javascript

Consider you have following html

<html>
 <body>
   <div id="table-container">
       <table id="my-table">
       </table>
   </div>
 </body>
</html>

We already have a table with id = "my-table"

Now, let's see how to add rows dynamically using Javascript

first let's create rows

var row1 = table.insertRow(0);

Above command creates an empty <tr> element and adds it to the first position of the table

var row2 = table.insertRow(1);

Above command creates an empty <tr> element and adds it to the second position of the table

Now, let's create row cells

var cell1 = row1.insertCell(0);
cell1.innerHTML = "Name";

Above command creates an empty cell and adds it to first row of the table

var cell2 = document.createElement("td");
cell2.innerHTML = "Age";

Above command creates an empty cell and adds it to first row of the table.

Now we have a table with two rows and first row having two cells.

Remove rows dynamically using Javascript

document.getElementById("my-table").deleteRow(0);

Above command deletes first row from the table having id = "my-table"

In this way we can dynamically add or delete rows from table dynamically JavaScript

C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

Pages