Not really sure where to start with this,
here is the design:
I have a table being dynamically populated using views in drupal. The table has one column for language, and a corresponding link to a file for whatever language there is a translation for on the node.
It outputs like this:
<table class="views-table cols-2">
<thead>
<tr>
<th class="views-field views-field-language views-align-left">Language</th>
<th class="views-field views-field-download views-align-right"></th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-language views-align-left">English</td>
<td class="views-field views-field-download views-align-right">Download</td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-language views-align-left">Spanish</td>
<td class="views-field views-field-download views-align-right">Download</td>
</tr>
</tbody>
</table>
From this I want a dropdown listing the languages, and one download link that changes depending on the language selected. Jquery or javascript solution anyone?
Ive found the following SO topic with a similar request, only my request needs to dynamically update the download link.
Sir, I leave the fine-tuning and styling up to you.
Here's the jsfiddle
var meta = {}
function updateDownLink () {
var selected = $(this).context.selectedOptions[0].text;
$('#download').attr('href', meta[selected]);
}
var select = $(document.createElement('select')).insertBefore($('.views-table tbody').hide());
select.change(updateDownLink);
$('.views-table tbody tr').each( function(r){
optionText = $(this)[0].cells[0].innerText;
meta[optionText] = $(this).find('a')[0].href.substr(7);
option = $(document.createElement('option')).appendTo(select).html(optionText)
})
var a = $(document.createElement('a')).insertAfter($('.views-table'));
$(a).attr('href', meta['English']).attr('id', 'download').text('Download');
Related
I have a HTML-Table
<table style="width:100%">
<tr>
<th>id</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>2</td>
<td contenteditable="true">Smith</td>
<td contenteditable="true">50</td>
</tr>
<tr>
<td>3</td>
<td contenteditable="true">Jackson</td>
<td contenteditable="true">94</td>
</tr>
</table>
(Just a TEST-Table)
It is editable, but how do I get all the rows (with ID) which were edited, to send them to a PHP-Backend which saves the changes to DB?
Thanks in advance,
Patrick.
You can save ids in an Array whenever field content is changed.
Here is the Working Example: https://jsfiddle.net/79egs9tc/
var idArr = [];
$(".edited").focusout(function() {
var id = $(this).parent().attr('id');
if($.inArray(id, idArr) === -1){
idArr.push(id);
}
console.log(idArr);
});
You can add check for content is changes or not.
Hope, it will work for you.
I was wondering if there is a way in Footable to show only the data colmuns for the one you have selected and hide the others.
For example, let's say the below are the list of albums (rows in my footable)
album-name-1
album-name-2
album-name-3
And if I select the album 1, it's data appears as follows:
album-name-1
track1
track2
track3
album-name-2
album-name-3
If I select album2, only those details appear and the previously expanded tracks from album 1 get collapsed as follows:
album-name-1
album-name-2
track1
track2
track3
album-name-3
I am using angularJS to use footable. Any suggestions on how to achieve this ? Like I know if I didn't use fancy stuff like Footable, I can achieve this by trigerring a click event using ng-click and pass on the index to show/hide only what I need. Just as this answer I asked previously: AngularJS display list right below the URL
But here, I am trying to do with the Footable plugin. Here is my html snippet for the same:
<table class="footable table table-stripped toggle-arrow-tiny" data-page-size="8">
<thead>
<tr>
<th data-toggle="all">Release Title</th>
<th data-toggle="all">Release Genre</th>
<th data-toggle="all">Classical</th>
<th data-hide="all">Tracks</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="album in vm.albums" footable>
<td ng-click="vm.editAlbum(album, $index)">{{album.data.title}}</small></td>
<td>{{album.data.genre}}</td>
<td ng-if!="album.data.classical">No</td>
<td ng-if="album.data.classical">Yes</td>
<td><br>
<li ng-repeat="track in album.data.tracks">
<a ng-click="vm.selectTrack(album, track)">{{track.title}}</a>
</li>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<ul class="pagination pull-right"></ul>
</td>
</tr>
</tfoot>
</table>
I have a dynamically generated table that looks like this
<table width="100%">
<tr>
<th>Client ID</th>
<th>Shortname</th>
<th>Client Name</th>
<th>Client Name 2</th>
</tr>
#foreach($clients as $client)
<tr>
<td>{{$client->customer_id}}</td>
<td>{{$client->shortname}}</td>
<td>{{$client->customer}}</td>
<td>{{$client->customer_row2}}</td>
</tr>
#endforeach
I would like to be able to click on a row, and automatically populate a form with the information in the table row.
I have thought of a solution that i think should work, but I haven't really got the JS skills to write the code.
This is what im thinking:
{{$row=1}}
<table width="100%">
<tr>
<th>Client ID</th>
<th>Shortname</th>
<th>Client Name</th>
<th>Client Name 2</th>
</tr>
#foreach($clients as $client)
<tr id="row{{$num}}">
<td class="clientId">{{$client->customer_id}}</td>
<td class="shortname">{{$client->shortname}}</td>
<td class="client">{{$client->customer}}</td>
<td class="clientRow2">{{$client->customer_row2}}</td>
</tr>
{{$row++}}
#endforeach
And here's some psuedo code to help you understand what im thinking:
onclick getElementById(.this)
input element with id clientId .put(this.#clientId)
input element with id shortname .put(this.#shortname)
input element with id client .put(this.#client)
input element with id clientRow2 .put(this.#clientRow2)
I hope that everybody understands what i'm trying to accomplish, and that someone is willing to help
Regards Johan
I ended up doing this:
<tr onclick="var td = $(this).find('td');
var row1 = td.eq(0).html();
var row2 = td.eq(1).html();
var row3 = td.eq(2).html();
var row4 = td.eq(3).html();
$('.input1').val(row1);
$('.input2').val(row2);
$('.input3').val(row3);
$('.input4').val(row4);">
on each table row, not very elegant, but it gets the job done
I need to find a TABLE within a DIV tag and perform modifications on the header. The available reporting tool does not allow to identify the generated table but allows script and DIV insertion.
Consider the table below where the header is the first line:
<div id="ScrollHeader">
<table>
<tr>
<td>Browser</td>
<td>Visits</td>
<td>Pages/Visit</td>
<td>Avg. Time on Site</td>
<td>% New Visits</td>
<td>Bounce Rate</td>
<td>Avg. Time on Site</td>
<td>% New Visits</td>
<td>Bounce Rate</td>
</tr>
<tr>
<td>Firefox first</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
<tr>
<td>Firefox</td>
<td>1,990</td>
<td>3.11</td>
<td>00:04:22 test test test</td>
<td>70.00%</td>
<td>32.61%</td>
<td>00:04:22</td>
<td>70.00%</td>
<td>32.61%</td>
</tr>
</table>
</div>
I need a JavaScript or jQuery code to transform the table to the following:
<div id="ScrollHeader">
<table>
<thead>
<tr>
<th>Browser</th>
<th>Visits</th>
<th>Pages/Visit</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
<th>Avg. Time on Site</th>
<th>% New Visits</th>
<th>Bounce Rate</th>
</tr>
</thead>
<tr>
<td>Firefox first</td>
<td class="numeric">1,990</td>
<td class="numeric">3.11</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
<td class="numeric">00:04:22</td>
<td class="numeric">70.00%</td>
<td class="numeric">32.61%</td>
</tr>
</table>
</div>
The code needs to identify the table within <div id="ScrollHeader">, insert THEAD before the first TR, change the TD to TH in the first line and close it with </thead>.
I have tried using $("div p[id^='ScrollHeader']").length to find the DIV and $("tr:first") to perform <table>.prepend(document.createElement('thead')); without success.
Try this:
$('#ScrollHeader table tr:eq(0)').wrap('<thead />');
$('#ScrollHeader table tr:eq(0) td').each(function () {
$('#ScrollHeader table tr:eq(0)').append($('<th />').html($(this).html()));
$(this).remove();
});
$('#ScrollHeader tr:first')
.wrap('<thead />')
.children().each(function(){
text = $(this).text();
$(this).replaceWith('<th>'+text+'</th>');
});
$('#ScrollHeader thead').insertBefore('#ScrollHeader tbody');
you can see it working here
I'm wondering if the following can be done.
I have a list of 'expenses' that I'm displaying in a table. 4 columns - amount, date, where, and what.
I was thinking I'd like to make each clickable via jQuery which would expand that particular expense, inline, to show a more detailed description.
What I'm trying to do is, on click, replace the contents of the 'tr' with a single 'td' that would contain the extended info. Problem is that 'td' only expands to about a quarter of the table. Is there any way of making it extend to the whole row, while maintaining the widths of the other 'td's in the other rows?
Here's what I would do. Working Demo.
<table id="expenses">
<thead>
<tr>
<td>Amount</td>
<td>Date</td>
<td>Where</td>
<td>What</td>
</tr>
</thead>
<tbody>
<tr class='expense' id='expense-1'>
<td>$5.99</td>
<td>4/2/2009</td>
<td>Taco Bell</td>
<td>Chalupa</td>
</tr>
<tr class='details' id='details-1'>
<td colspan='4'>
It was yummy and delicious
</td>
</tr>
<tr class='expense' id='expense-2'>
<td>$4.99</td>
<td>4/3/2009</td>
<td>Burger King</td>
<td>Whopper</td>
</tr>
<tr class='details' id='details-2'>
<td colspan='4'>
The king of burgers, indeed!
</td>
</tr>
<tr class='expense' id='expense-3'>
<td>$25.99</td>
<td>4/6/2009</td>
<td>Olive Garden</td>
<td>Chicken Alfredo</td>
</tr>
<tr class='details' id='details-3'>
<td colspan='4'>
I love me some italian food!
</td>
</tr>
</tbody>
</table>
With styles like these:
#expenses tr.expense {
cursor: pointer;
}
#expenses tr.details {
display: none;
}
And then have Javascript that looks like this:
$(function() {
$('tr.expense', '#expenses').click(function() {
var id = $(this).attr('id').split('-').pop();
var details = $('#details-'+id);
if(details.is(':visible')) {
details.hide();
} else {
details.show();
}
});
});
That should do it.
<td colspan="4"> ?