jquery-table – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Fri, 08 Jun 2012 09:32:12 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 jQuery Remove Column From Table Examples https://theextremewebdesigns.com/blog/jquery-remove-column-remove-column-from-table-using-jquery-examples/ https://theextremewebdesigns.com/blog/jquery-remove-column-remove-column-from-table-using-jquery-examples/#respond Fri, 08 Jun 2012 09:32:12 +0000 https://theextremewebdesigns.com/blog/?p=861 Ever wanted to remove column from table or remove multiple columns from a table using jQuery? In this article, I am going to show you with examples, how easy it is to remove / delete table column using jQuery.

How to Remove Single Column or Multiple Columns From A Table using jQuery

Following is the HTML source code I used for the examples:

HTML Source:

<html>
<head>
<title>Remove Table Columns</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="my_table">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>6</td>
<td>11</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>7</td>
<td>12</td>
<td>17</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
<td>13</td>
<td>18</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
<td>14</td>
<td>19</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
</tr>
</table>

<button id="remove_column">Remove Column</button>

</body>
</html>

In this example, we are going to remove table columns when the “Remove Column” button is clicked. So all code will go into the click event of the button. With that in mind, let’s take a look at how you can remove a single column and / or remove multiple columns from table using jQuery. The acutal code will be following by additional code that you can use to remove the headers as well, if they exist in your table.

Example 1 (a): Remove all Columns except first column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove all columns except first column

$('#my_table td:not(:nth-child(1))').remove();

//Remove all columns except first column along with Header

$('#my_table th:not(:nth-child(1)), #my_table td:not(:nth-child(1))').remove();

});

});

</script>

Example 1 (b): Remove all Columns except first column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Alternate way to Remove all columns except first column

$("#my_table").find("td:not(:nth-child(1))").remove();

//Alternate way to Remove all columns except first column along with Header

$("#my_table").find("th:not(:nth-child(1)), td:not(:nth-child(1))").remove();

});

});

</script>

Example 2: Remove only second column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove only 2nd column

$('#my_table td:nth-child(2)').remove();

//Remove only 2nd column along with Header

$('#my_table th:nth-child(2), #my_table td:nth-child(2)').remove();

});

});

</script>

Example 3: Remove only third column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove only 3rd column

$('#my_table td:nth-child(3)').remove();

//Remove only 3rd column along with Header

$('#my_table th:nth-child(3), #my_table td:nth-child(3)').remove();

});

});

</script>

Example 4: Remove all Columns except second column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove all columns except second

$('#my_table td:not(:nth-child(2))').remove();

//Remove all columns except second along with Header

$('#my_table th:not(:nth-child(2)), #my_table td:not(:nth-child(2))').remove();

});

});

</script>

Example 5: Remove last column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove last column

$('#my_table td:last-child').remove();

//Remove last column along with Header

$('#my_table th:last-child, #my_table td:last-child').remove();

});

});

</script>

Example 6: Remove all Columns except last column of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_column").click( function() {

//Remove all columns except last column

$('#my_table td:not(:last-child)').remove();

//Remove all columns except last column along with Header

$('#my_table th:not(:last-child), #my_table td:not(:last-child)').remove();
});

});

</script>

As you see, all it takes is just 1 line of code to remove the column that you desire.

Your Turn!

Do you know of any other ways to remove table column or remove columns from table using jQuery? Share your answers by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-remove-column-remove-column-from-table-using-jquery-examples/feed/ 0 861 jQuery Table Remove Rows Examples https://theextremewebdesigns.com/blog/jquery-table-remove-row-remove-multiple-rows-from-table-examples/ https://theextremewebdesigns.com/blog/jquery-table-remove-row-remove-multiple-rows-from-table-examples/#comments Fri, 08 Jun 2012 08:09:44 +0000 https://theextremewebdesigns.com/blog/?p=857 Ever wanted to remove single row from table or remove multiple rows from a table using jQuery? In this article, I am going to show you with examples, how easy it is to remove / delete table row using jQuery.

How to Remove Single Row or Multiple Rows From A Table using jQuery

Following is the HTML source code I used for the examples:

HTML Source:

<html>
<head>
<title>jQuery Table Remove Row | Remove Multiple Rows from Table Examples</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="my_table">
<tr>
<td>1</td>
<td>6</td>
</tr>
<tr>
<td>2</td>
<td>7</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
</tr>
</table>

<button id="remove_row">Remove Row</button>

</body>
</html>

In this example, we are going to remove table rows when the “Remove Row” button is clicked. So all code will go into the click event of the button. With that in mind, let’s take a look at how you can remove a single row and / or remove multiple rows from table using jQuery.

Example 1 (a): Remove all Rows except first row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove all rows except first row

//$("#my_table").find("tr:gt(0)").remove();

});

});

</script>

Example 1 (b): Remove all Rows except first row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Alternate way to Remove all rows except first row

$("#my_table").find("tr:not(:first)").remove();

});

});

</script>

Example 2: Remove only second row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove only 2nd row

$("#my_table").find("tr:eq(1)").remove();

});

});

</script>

Example 3: Remove only third row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove only 3rd row

//$("#my_table").find("tr:eq(2)").remove();

});

});

</script>

Example 4: Remove all Rows except second row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove all rows except second

$("#my_table").find("tr:not(:eq(1))").remove();

});

});

</script>

Example 5: Remove last row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove last row

$('#my_table tr:last').remove();

});

});

</script>

Example 6: Remove all Rows except last row of table using jQuery

<script type="text/javascript">

$(document).ready(function() {

$("#remove_row").click( function() {

//Remove all rows except last row

$("#my_table").find("tr:not(:last)").remove();

});

});

</script>

As you see, all it takes is just 1 line of code to remove the row that you desire.

Your Turn!

Do you know of any other ways to remove table row or remove rows from table using jQuery? Share your answers by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-table-remove-row-remove-multiple-rows-from-table-examples/feed/ 2 857 jQuery Table Rows Count Examples https://theextremewebdesigns.com/blog/jquery-table-rows-count-count-rows-in-table-using-jquery-example/ https://theextremewebdesigns.com/blog/jquery-table-rows-count-count-rows-in-table-using-jquery-example/#respond Fri, 08 Jun 2012 04:45:15 +0000 https://theextremewebdesigns.com/blog/?p=847 Did you want to count the rows of a table using jQuery but did not know where to start from? In  get table rows count in jQuery by using just 1 line of code. Follow along to learn how.

Examples in jQuery to Get Table Rows Count

There are couple of ways to use jQuery to get table rows count.  It can be obtained by using the .length property. We are going to look at them now by means of examples.

Example 1: Count Rows in Table using jQuery

<html>
<head>
<title>Count Table Rows with jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>

<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="my_table">
<tr>
<td>1</td>
<td>6</td>
</tr>
<tr>
<td>2</td>
<td>7</td>
</tr>
<tr>
<td>3</td>
<td>8</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>5</td>
<td>10</td>
</tr>
</table>

<button name="count_table_rows" id="count_table_rows">Count Table Rows</button>
<script type="text/javascript">

$('#count_table_rows').click(function() {

var rows = $("#my_table tr").length;

alert('Total Rows: '+rows);

});

</script>
</body>
</html>

In the above example, simply click on the button and that will alert the number of rows in the table.

Example 2 – Count Rows in Table using jQuery

Alternately, instead of using .length property, you can use size() method to get table rows count. Simply use the following jQuery code instead of the one listed in the code above:

<script type="text/javascript">

$('#count_table_rows').click(function() {

var rows = $("#my_table tr").size();

alert('Total Rows: '+rows);

});

</script>

The above code produces the same result as the earlier code.

jQuery length vs size()

Now that you have noticed that both length vs size() do the same thing, then what exactly is the difference between them. Functionality wise, there is no difference. They do the same thing. The .length property is preferred because it does not have the overhead of a function call and hence it is quicker to execute.

So now that you know the difference, use .length property from here on and make your code run even more faster.

That’s it for now!

Do you know of any other ways to get table rows count using jQuery? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-table-rows-count-count-rows-in-table-using-jquery-example/feed/ 0 847