How to replace between existing table rows in JavaScript - javascript

I am trying to regenerate a table with a new order, the problem i encounter is in the performance,
I Have something like this:
<table>
<tr id="row1"></tr>
<tr id="row2"></tr>
<tr id="row3"></tr>
<tr id="row4"></tr>
</table>
Obviously my table is much more complex, but what i would like is a solution with good performance for a replacing command
my target table should be something like:
<table id="mainTable">
<tr id="row3"></tr>
<tr id="row4"></tr>
<tr id="row1"></tr>
<tr id="row2"></tr>
</table>
When I redraw it the performance is bad(for more then 100 lines)
is there any way to just replace the rows between themselves without redrawing it?
Thanks

For rearranging them append them using append() or next()
$table = $('#mainTable');
$table.append($('#row1,#row2', $table));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mainTable">
<tr id="row1">
<td>1</td>
</tr>
<tr id="row2">
<td>2</td>
</tr>
<tr id="row3">
<td>3</td>
</tr>
<tr id="row4">
<td>4</td>
</tr>
</table>

The basic sultion is using jquery "after" function , which move the target element after the wanted element ..
$("#row1").after("#row4");
or if you want to sort the table based on its values , you can use plugins like : table sorter

Related

Click on element to filter column in javascript (datatables)

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):
<table>
<thead>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>2</td>
</tr>
<tr>
<td>Bob</td>
<td>1</td>
</tr>
<tr>
<td>Frank</td>
<td>5</td>
</tr>
</tbody>
</table>
If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.
Use ColumnFilterWidgets or ColumnFilter.
There are examples, snippets and docs in those pages. I hope it helps.

Taking the count of number of 'table' tags using jquery

This is my HTML code
<div class="tableStyle myWebsiteTable">
<table cellspacing="0" cellpadding="0" id="site0" class="site active">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr class="websiteDetails">
<td colspan="5">
<div id="websiteDetails0" class="divWebsiteDetails" style="display: block;">
<table>
<tbody>
<tr id="190">
<td>index</td>
<td></td>
<td></td>
</tr>
<tr class="addPage">
<td align="center" colspan="5"></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr><!--Website Details-->
</tbody>
</table>
<table id="addNewSiteTable">
<thead>
<tr>
</tr>
</thead>
</table>
</div>`<br/>
Now table get added dynamically to this structure.I want to write some logic based on the no of table inside the first div.I tried doing this but did not work $('myWebsiteTable').children('table').length)
PLease suggest the correct way to achieve it
Thank you
You need to use . before class in Class Selector (“.class”)
Live Demo
$('.myWebsiteTable').children('table').length
Also make sure you have added jQuery and elements are added to DOM.
You may need to use find() as children will give you only first level childs where as find will get all the tables in descendants.
$('.myWebsiteTable').find('table').length
$('.myWebsiteTable').children('table').length
And if you actually want to count nested tables:
$('.myWebsiteTable table').length
i think it's class
http://api.jquery.com/class-selector/
$('.myWebsiteTable')
try this, this is more helpfull for you
Demo Here

Count rows with more equal cells just once

For example I have this table:
<table>
<tr>
<td class ="mark">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td class ="mark">4</td>
<td class ="mark">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Now I want to count how many rows have cells with class "mark".
I can use something like this (with jQuery):
$('.mark').length;
But it gives me number 3 (in example table), but there are only 2 rows with this class.
There is any elegant solution how to achieve this?
use parent().
try this
$('.mark').parent().length;
fiddle here
try this:-
$('.mark').parent('tr').length;
You can also try
$('.mark').closest('tr').length;
This will also work for cases when mark is deeply nested.

Table sorting from multiple tables

i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();

Expand / Collapse HTML Tables

I have an HTML table which is generated dynamically from server.
I want to have an expand/collapse in this html table that is when I click on expand I should get a new column and rows and on collapse, it should be as it was before.
I don't want to use any 3rd party plugin for it. I want to use jQuery and Ajax.
Can you help me or provide any info on how can I do this?
Ok I think the question is too vague to be answered completely if you think about.
Where are the contents of the new columns, and rows, coming from? What structure do you have? What've you tried already? What didn't work? David Thomas comment.
If you don't want to use a jQuery plugin like this one it means you will have to do it yourself and a) nobody here will do it for you completely b) much less without any information, that would just be guessing.
That said here is a quick and dirty example of what your approach should be like.
HTML
<table border="1">
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr class="clickable">
<td colspan="2">Click to toggle Next</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
jQuery
$(".clickable").click(function() {
$(this).next().toggle();
});
As I said it's just an example, it's not scalable (doesn't even support hiding two rows) you can see a demo here.
I can update the answer with a better more personalized answer if you update your question.
But if you want to build it yourself, this are some of this could come in handy:
.show()
.hide()
.toggle()
.animate()
:nth-child
.children()
And many other depending on your approach.
Good luck!
Here is a quick example, I hope It helps if I understood your question correctly.
With this structure:
<a class="expand" href="#">Expand</a> | <a class="collapse" href="#">Collapse</a><hr />
<table id="mytable">
<thead>
<tr>
<td>
HEAD
</td>
<td>
HEAD
</td>
<td>
HEAD
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
<tr>
<td>
Demo
</td>
<td>
Demo
</td>
<td>
Demo
</td>
</tr>
</tbody>
</table>
Maybe you could do something like this:
$(document).ready(function () {
$(".expand").click(function () {
$("#mytable tbody").show("slow");
});
$(".collapse").click(function () {
$("#mytable tbody").hide("fast");
});
});
An accordion is a simple, elegant solution: javascript and css.
This fiddle is from the W3Schools explanation above.

Categories