I have the following table structure inside a view which gets displayed in the _Layout view in place of #RenderBody
<table>
<thead>
<tr>
<th>first</th>
<th>second</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1st</td>
<td>2nd</td>
<td>3rd</td>
</tr>
</tbody>
</table>
In my _Layout page, I want to apply the contextMenu event to the th elements, however, being a beginner, I'm having a hard time figuring the selector for the same.
Some combinations that I've tried -
I have a reference to my table in a variable called oTable
oTable.$('tr th').contextMenu ....
oTable.$('thead tr th').contextMenu ....
$('table.tableID th').contextMenu ....
None of them are working. Any suggestions?
If you simply want to select ALL of your th elements then you don't need anything more complicated than this:
$('th').contextMenu ....
If your table has an id associated to it then the following will allow you to target just that table:
$('#yourid th')
Related
I have my grails view, and using a api rest I Receive an array of items,that I put in a table,and I want to make the pair rows with tr class="alt">
I want for first for second ,and so on.
I was thinking to do that with a or creating a tag,but don´t know really if there is something useful that can use for similar cases.
The tr that I want to change In the code is as
<table id="customers">
<tr>
<th>Foto</th>
<th>Nombre</th>
<th>Vendedor</th>
<th>Precio</th>
<th>Estado</th>
<th>Ciudad</th>
</tr>
<g:each in="${results}">
**<tr >**
<td><img src="${it.thumbnail}"></td>
<td>${it.title}</td>
<td>${it.nombre_vendedor}</td>
<td>${it.price}</td>
<td>${it.condition}</td>
<td>${it.address.state_name}</td>
</tr>
</g:each>
</table>
<g:each in="${results}" status="ix">
<tr class="${ix % 2 ? 'light' : 'dark'}">
<td>...
</tr>
</g:each>
I want to create simple list in a form of table like on the image:
I am confused how to implement update/delete actions.
Both are [HttpPost] methods.
But I can't create forms inside <td> tags.
What is the valid way to make a table in the way that I want?
I think I have understood what do you need.
You can make one simple table and into each row put only one td which keep form.
Something like this:
<table>
#{
foreach (var item in Model.MyCollection)
{
<tr>
<td>
<form>
<table>
and hear put your existing row with your columns <tr><td>...</td><td>...</td></tr>
</table>
</form>
</td>
</tr>
}
}
and you will have one form for each record.
I'm new to dart so this might seem like a silly question but I'd like to apply different CSS to different rows based on column values:
<table id="requests">
<tr>
<td>Title</td>
<td>Status</td>
<td>Date</td>
</tr>
<tr>
<td>Foo</td>
<td>Approved</td>
<td>Date</td>
</tr>
<tr>
<td>Bar</td>
<td>Denied</td>
<td>Date</td>
</tr>
<tr>
<td>Ipsum</td>
<td>None</td>
<td>Date</td>
</tr>
</table>
So far I can do this:
queryAll("tr td").classes.add("foo");
But I'm wondering how to get all rows whose columns have the value "Approved".
Here is a quick dirty way to do it from code:
querySelectorAll('tr').where(
(tr)=> tr.children.any(
(td)=>td.text == 'Approved'
)
)
.forEach((approvedTr)=>approvedTr.classes.add('approved'));
But i really recommend you to use a databinding framework (like Polymer, or AngularDart) to set different styles/classes depending on data. It's far more easy to use.
[A new thread was opened about doing this using Polymer]
I have tablesorter and pager working together and had no problems so far.
Only thing that I can't manage to do correctly is update the pager after a search.
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>Al</td>
<td>18</td>
<td>Germany</td>
</tr>
<tr>
<td>BAl</td>
<td>19</td>
<td>Italy</td>
</tr>
<tr>
<td>CAl</td>
<td>99</td>
<td>Sweden</td>
</tr>
<tr>
<td>DAl</td>
<td>65</td>
<td>Australia</td>
</tr>
<tr>
<td>EAl</td>
<td>1</td>
<td>Germany</td>
</tr>
</tbody>
I initialize the sorter and the pager to display only 2 rows per page, but after searching for 99 year old person still pager will show 1/3 and not 1/1 which is the correct!
Pager still works, is that visual total page count that is wrong!
Any tips?
I am not sure if this will help or not, but I have it working on mine.
Super important note, all the examples the Official Sorter page has does not use a ID of the table, it just says any table tag. (add the # to the reference)
$("#caseInfoTable").tablesorter({widthFixed: true, widgets: ['zebra']});
$("#caseInfoTable").tablesorterPager({container: $("#pager"), positionFixed: false});
[1]
In the jquery.tablesorter.pager.js file I added these two lines at line 110...
c.pagerPositionSet = false;
fixPosition(table);
Those 2 go right before the line
updatePageDisplay(table);
[1] https://forum.jquery.com/topic/jquery-problem-with-tablesorter-pager-plugin-there-should-be-an-option-to-turn-off-absolute-positioning-of-pager-container/
I am working on a Rails 3.2.11 app using angular 1.0.5.
Currently, a user will select a Cycle from a dropdown, and that will return a bunch of JSON from my controller using ng-resource.
Here is the method
$scope.update = function(cycleId) {
Cycle.get({action: cycleId}, function(resource) {
$scope.selectedCycle = resource;
$scope.tasks = resource.tasks;
$scope.newTask = {cycle_id: resource.cycle.id};
});
};
Here is an example of what json my controller is returning, which is 'resource' in above function: https://gist.github.com/anonymous/01ffe5a37e370661f6fb
Basically I am needing to use ng-repeat twice (one of them nested) using angulars ng-repeat, so that I can get the task_type_name in there as a header. I'm getting some weird interesting results. See the shorted code in my view below and the full thing here
<section ng-repeat="(task_type_name,task_type) in tasks ">
<h2>{{task_type_name}}</h2>
<table>
<tr>
<th>Task Name</th>
</tr>
<section id="task-edit">
<tr ng-repeat="task in task_type">
<td>
<%= link_to "{{task.name}}", '', "ng-click"=>"toggleShowHistory(task.id)" %>
</td>
</tr>
</section
</table>
So my is occuring at this part here
<section id="task-edit">
<tr ng-repeat="task in task_type">
If I try to combine that section and tr, OR change tr to ANYTHING but a tr, {{task}} no longer becomes available.
<section class="task-edit" ng-repeat="task in task_type">
{{task}} is available right here
<tr>
{{task}} is not available right here
<td>
{{task}} is not avaiable right here
</td>
</tr>
</section>
I tested the same concept on the first loop, and it seems to be fine on that loop just not the second, nested loop.
I'm assuming it has something to do with the scope. But i'm just not getting it.
Also, if you have any tips, i'm very new to angular and would love them.
I created a demo, and I am not seeing any issue. Please check your data source and make sure you plug in the tasks value of the json.
You need to change the nested section to tbody.
Demo on jsfiddle