Column toggle not working when append the table rows dynamically - javascript

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).

Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog

You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");

Related

JQuery link entire table row to anchor to trigger fancybox

I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE

Create a table inside of tr tag?

I have an html table, <tbody> of it is generated with angular ng-repeat. Here is my html:
<tbody>
<tr ng-repeat-start="car in carList | filter:tableFilter" ng-click="activeRow = car.name">
<td><a target="_blank" href="{{car.carLink}}">{{car.name}}</a></td>
<td>{{car.review}}</td>
<td>{{car.rating}}</td>
<td>{{car.fiveStarPercent}}</td>
<td>{{car.recommended}}</td>
<td>{{car.price}}</td>
</tr>
<tr ng-repeat-end ng-show="activeRow==car.name">
<td>{{car.name}}</td>
</tr>
</tbody>
I want to replace <td>{{car.name}}</td> with the table that will show only when you click on some row.
But if I just go and replace <td>{{car.name}}</td> on the table I need, my main table will no longer create extra rows when you click.
So, is it possible to put a table inside of a <tr> tag? If yes, then what is the right way to do it?
Use colspan and rowspan for this purpose https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
You may try to do it like this:
<table><tr><td>...</td></tr></table>
ie, you can add a full table inside the td
JSFIDDLE DEMO

Resizing table columns, that can be hidden

I have a standard table with option to hide columns and I want to use a plugin for re-sizing the width of the columns.
I tried with colResizable and resizableColumns but the things get messy when I hide a column and then try re-sizing.
Edit: My table:
<table id="mytable">
<thead>
<tr><th class="column1"></th>text 1 <th class="column2">text 2</th></tr>
</thead>
<tbody>
<tr><td class="column1"> cell00 </td> <td class="column2"> cell01 </td></tr>
<tr><td class="column1"> cell10 </td> <td class="column2"> cell11 </td></tr>
<tr><td class="column1"> cell20 </td> <td class="column2"> cell21 </td></tr>
</tbody>
</table>
Activating colResizable:
$("#mytable").colResizable({
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
Function for hidding / displaying columns:
function toggleColumn(index){
if(something){
$('.column'+index).hide();
}else{
$('.column'+index).show();
}
$("#"+tableID).colResizable({
disable:true
});
$("#"+tableID).colResizable({
disable:false,
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
}
After each toggle i restart colResizable, so it can get the new values.
The problem comes when I re-size any columns beyond the hidden ones.
I also need the option to set default widths to each column. All suggestions are welcomed.
colResizable 1.5 is compatible with hidden columns. You can download it on http://www.bacubacu.com/colresizable
if you want to change column visibility after colResizable is already activated, those are the steps you have to follow:
call colResizable (as usual)
before you perform any DOM modifications (such as hiding a column), destroy colresizable using disable:true
change columns visibility
call colResizable again
It looks like Datatables has everything you may want.
Check out this fiddle. You get everything: Show, hide columns, resized columns, and many more cool options. And using it is very easy
$(document).ready( function () {
$('#example').dataTable( {
"option": value;
} );
} );
option 1:
Use a class name on the TD. Give the class name in a style element that is added dynamically to the document. To resize, delete the style element from the document then add again with new specifics.
option 2:
Cycle through the rows collection of the table setting style.width on .cells[0], .cells[1], ....
To hide, set style.display to none, then to unhide, inline.

Multiple TD after some TD move to new line

Hi I am generating a table dynamically and adding new TR and TD to it dynamically in the following manner.
$('#tableId').append('<tr><th colspan="2"></th>');
The above code is called only once in my code.
Then I am adding TD to it in the following manner:
var tempurl = 'http://google.com';
$('<td>').appendTo($('#tableId')).html("<a href='"+tempurl+"'>"+tempurl+"</a>");
The problem that I am facing is, all TD are getting aligned in one row(in the same line only) and my page width get increased by many times.
I tried adding css to table so that if table size exceed TD should go to next line:
max-width: 90%;
display: block;
and
display: inline;
but it is not working out for me.
Please code a correct static HTML table and then use this code to generate dynamically a still correct table.
Here's an example of such a table:
<table>
<caption>Google results</caption>
<thead>
<tr>
<th scope="col">Title and link</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Stack Overflow
</td>
<td>Stack Overflow is a website (...)</td>
</tr>
<tr>
<td>
Stack Exchange
</td>
<td>Stack Exchange is a website (...)</td>
</tr>
</tbody>
</table>
no need for a header cell spanning all rows: you probably intend it as a caption
in a vertical table, you should have a header cell (th) on top of each column, in thead element (I added scope="col" attribute for accessibility reasons. It'd be row if header cells were on left of each row. Don't use scope if you've colspan or rowspan somewhere)
in tbody element, one row (tr) per actual row
in each row, as many td elements as there are header cells (except if there are some colspan or rowspan)
EDIT: why do you have 2 different id? Confusing.

Creating merged table cells using Twitter Bootstrap

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:
I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.
Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly
<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>

Categories

Resources