I'm using the following code:
This is html table:
<table id="preTbl">
<tr>
<th>Type</th>
<th>Origin</th>
<th>Count</th>
<th>Age Range</th>
<th>Gender</th>
</tr>
<tr ng-repeat="row in returnData" class="centered">
<td>{{ row.TypeName }}</td>
<td>{{ row.Origin }}</td>
<td>{{ row.Count }}</td>
<td>{{ row.ageRange}}</td>
<td>{{ row.gender}}</td>
</tr>
</table>
My JS function with user clicks search:
$("#preTbl th:nth-child(4)").hide();
$("#preTbl td:nth-child(4)").hide();
The th hides fine, but the td will not hide.
Working fiddle.
The :nth-child(n) pseudo-class is easily confused with :eq(n), even though the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n) only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
You may need to use :eq() or .eq() instead :
$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();
Hope this helps.
$("#preTbl th:eq(2), #preTbl td:eq(2)").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" id='preTbl'>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Column 0 content</td>
<td>Column 1 content</td>
<td>Column 2 content</td>
</tr>
</table>
I found that b/c of the many styles being applied since this is a big application, I had to rely on using ng-hide. You can see read from here it has to be manually overriden because it uses !important, but it helped a lot in my case to get the job done.
angularjs ng-hide information
Thanks and I hope this helps people in the future!
Related
I have a table (table1) which contains only th tags and a table (table2) which contains only td tags. (I know this set up seems really wrong, but it's set up this way due to a few different issues with the application, so try not to worry about why it's set up this way).
Each TH in table1 acts as a sorting button corresponding the TD in table2.
The full width of each table is the same, however the width of the TH's and the TD's are different making them not line up correctly.
I need to find a way to link the width of each individual TH to the width of the TD below it. The difficult part is that the TH sorting buttons are dynamic and the user has the ability to add or remove TH's to their liking, so the widths need to be able to dynamically change. I can't figure out how to link the two together seamlessly. Any ideas?
IE:
<table id="table1">
<thead>
<th>Sorts 1</th>
<th>Sorts 2</th>
<th>Sorts 3</th>
<th>Sorts 4</th>
</thead>
</table>
<table id="table2">
<thead>
<td>Sort 1</td>
<td>Sort 2</td>
<td>Sort 3</td>
<td>Sort 4</td>
</thead>
</table>
I have created a basic Fiddle that shows what mean. The last few td's get squished into the Sorts7 column. I want the TH and the corresponding TD to always equal the same width, even if we add or remove columns.
Link to Fiddle
Thank you in advance.
Edit: The two tables do have to remain separate. It's unfortunate I know. :(
Well I don't like this answer, but it works so...
What you could do is use jQuery to get the widths of the bottom columns and apply it on the top columns - like this:
$('#top1').css({"width":$("#bottom1").width()});
$('#top2').css({"width":$("#bottom2").width()});
$('#top3').css({"width":$("#bottom3").width()});
$('#top4').css({"width":$("#bottom4").width()});
table, th, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<thead>
<th id="top1">Sorts 1</th>
<th id="top2">Sorts 2</th>
<th id="top3">Sorts 3</th>
<th id="top4">Sorts 4</th>
</thead>
</table>
<br> <!-- To demonstrate that they are separate -->
<table id="table2">
<tr>
<td id="bottom1">Sort 1</td>
<td id="bottom2">Sort 2 With Longer Content</td>
<td id="bottom3">Sort 3</td>
<td id="bottom4">Sort 4</td>
</tr>
<tr>
<td id="bottom1">Sort 1</td>
<td id="bottom2">Sort 2</td>
<td id="bottom3">Sort 3 With Longer Content</td>
<td id="bottom4">Sort 4</td>
</tr>
</table>
I just hope you don't have a lot of columns!
You can use a same class for both th & td.
Will something like this work for you?
I've used jQuery because of simplicity:
$( "#table2 tr td" ).each(function( index ) {
$('#table1 th').eq(index).css('width',$(this).width()+'px');
});
Demo: https://jsfiddle.net/6u1dyL55/10/
So, idea is to get td widths, and attach it to corresponding TH's in first table (via indexes - because they are same).
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
This is the table structure that I have:
<table>
<thead >
<tr>
<th >Header 1</th>
<th >Header 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
I have multiple tbody tags to support a nested ng-repeat structure with spanned rows hence it is inevitable to have the tbody tags.
However, I am now unable to put these tbody tags in a valid container and set the overflow-y as auto inorder to bring in the scroll bar just for the table data and not including the thead (headers)
Help will be appreciated!
first thing to consider of multiple tbody. you can do your task without using of multiple tbody as it is not a good approach.
Aside you can use Table FloadHead plug in. probably it will help in making headers fixed.
applying datatable on each table using id but it only triggers for one table and give error in console.
"Uncaught TypeError: Cannot set property 'nTf' of undefined" while i need to display it on every table .
Using class cannot be applied because each table has different td's count .
for instance i have two tables with id's table1 & table2 and calling datatable as
$('#table1').DataTable();
$('#table2').DataTable();
Please advise any help would be appreciated
my first table is
<table id="table1">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>project</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test project</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"></th>
</tr>
</tfoot>
</table>
My second table is
<table id="table2">
<thead>
<tr>
<th>No.s</th>
<th>Title</th>
<th>Task</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>test</td>
<td>test task</td>
<td>Edit</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4"></th>
</tr>
</tfoot>
</table>
Using class cannot be applied because each table has different td's count
There is nothing to do when we use datatable for mutiple tables it works only for the tables which have same count of td's and can be applied using the both table's same class
Live Demo
i just had this problem and it turned out to be one too many tds in the tfoot. Check your rows and columns for extras, unclosed tags etc.
We have a large HTML table (maybe 100x100 cells). Selecting rows is pretty fast as we can simply select all TDs in a specific TR. But selecting columns with the help of jQuery and nth-child is much slower. Are there any faster alternatives for column selection? How about pseudo classes for every column (like class="column-1", and so on)? What is your experience with this?
Are there any faster alternatives for column selection?
I would recommend using the much-ignored COLGROUP/COL tags, as per the original W3C HTML spec. Copy-and-paste this code into a dummy HTML page and see for yourself the magic of COLGROUPs!
<table id="mytable">
<caption>Legend</caption>
<colgroup>
<col style="background-color: #f00;"/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>cell 1,1</td>
<td>cell 1,2</td>
<td>cell 1,3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>footer 1,1</td>
<td>footer 1,2</td>
<td>footer 1,3</td>
</tr>
</tbody>
</table>
TFOOT tags go before TBODY tags. COLGROUPs have COLs for each column.
The advantage of this is that styling to a COL inside a COLGROUP will cascade to all of the columns in a table. Background colors, for instance. It never ceases to amaze me how many people have absolutely no idea of this trick, even though the HTML spec is out there for anybody to read and digest.
I personally would use a class for each column. My usual standard is as such:
<tr class="row row-1">
<td class="col col-1"></td>
<td class="col col-2"></td>
<td class="col col-3"></td>
</tr>
Have you tried just using the DOM directly?
var column = new Array();
var cells;
for (row = 0; row < table.rows.length; row++) {
tr = table.rows[row];
column.push(tr.cells[1]);
};
It works pretty fast for me at http://www.jsfiddle.net/gaby/GWqtB/4/ (for 100cols x 300rows)
Can you provide an example, so we can see the speed of your implementation ?
Could it be that the delay is at some other part of the code ? like styling while selecting..