JQuery merge or combine two tables into one

Hi, this is something interesting isn't it? But, this is what my requirement. I will tell you in detail. I have a gridview on my page and another table with the same number of columns. Grid view is for showing and updating data. And I have one extra table for adding a new record. This table immediately follows the actual grid view. The extra table named the class as "tableAdd". So, user sees the gridview header and enter the data into the tableAdd row and hit save button and gridview will refresh and shows up the newly created record.

But there is a problem in look and feel. Because both are in different tables, when the browser width changes or resolution changes the columns in both tables are not in sync, even if they have same columns and same width. So, how to make them sync? Then I got an idea to implement a solution  using JQuery. So, I planned to grab both tables on client side and merge them into one.

<table class="gridview"><tr><td>col1</td><td>col2</td></tr></table>

<table class="tableAdd"><tr><td><input type="text" /></td><td><input type="button" /></td></tr></table>

Now, above are two tables I have and now I need to merge them into one and delete the second table from the DOM.

$(".gridview > tbody:last").append($(".tableAdd > tbody").html());   
$(".tableAdd").remove();

Hope, you understood it well and may helps in some scenarios. Please let me know, if you have any problems.

Read More...

JQuery Append a table row at first and last positions of a table

This is something you need to know when you have some requirement to add rows to table on client side using some java script technology. I have chosen JQuery and the requirement is, I need to add the rows at first and last of the existing table. Below is the way to achieve that.

Add as first row of a table:

$(".gridview").prepend("<tr></tr>");

Add as last row of a table:

$(".gridview > tbody:last").append("<tr></tr>");

I think, you feel it's simple. Yes it is easy and helps in solving some issues. And remember the class gridview I have used in this example, is the table class name. And the string "<tr></tr>" is the actual table row content.

Hope this helps and let me know, are there any better ways to implement the same. Read More...