I have a table within my Spring MVC web application that uses JSP to serve up the data, the table is a dynamically loaded list of jobs to be worked on, what I am trying to do is when the table row is selected change the color of the Row to red and hide all other rows in the table.
The rows are getting highlighted but when I try to hide the rows I have no success, any ideas or help is much appreciated , please she what I have tried below with table structure. Thank You
What happens when table data link is pressed is a form is opened with table data passed to form
Table:
<table class="table table-hover" id="no-more-tables" style="margin-bottom: 0px;">
<thead>
<tr>
<th>Service Id</th>
<th>Vehicle</th>
<th>Due date</th>
<th>ServiceType</th>
<th>Last update</th>
<th>Frequency</th>
<th>Start</th>
</tr>
</thead>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id2" class="">
<td data-title="Service Id">2</td>
<td data-title="Vehicle">vehicle two</td>
<td data-title="Due date">2018-02-14</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-14</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=2' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
<tbody style="margin-bottom: 0px;">
<tr id="table_row_id3" class="">
<td data-title="Service Id">3</td>
<td data-title="Vehicle">VAN1</td>
<td data-title="Due date">2018-02-20</td>
<td data-title="ServiceType">Preventive Maintenance</td>
<td data-title="Last update">2018-02-20</td>
<td data-title="Frequency">Every 3 months, from finish date.</td>
<td data-title="Start"><a href='/inspections/?service_id=3' id="startLink">
<span class="glyphicon glyphicon-plus-sign"></span>
</a> </td>
</tr>
</tbody>
</table>
Jquery code:
$(document).ready(function() {
$(window).on('load',function(){
var service_id = $('#service_id').val();
if(service_id){
$('#serviceRow').toggle();
$('#table_row_id'+service_id).addClass('danger');
$('#table_row_id'+service_id).siblings().hide();
}
});
});
Other way I approached:
$(document).ready(function(){
$(window).on('load',function(){
$( "table tbody tr" ).siblings( ".danger" ).hide();
});
});
I have researched solutions on SO and on-line with no joy including this one:
How to hide all tr from table except clicked one
Please if you decide to down-vote my question please provide a reason as to why and we can try rectify the issue, thanks for your time, let me know if need anything else. Jason
There are a few issues with your code.
1. You are not attaching click event handler for the table row. You are writing the logic inside window onload event which won't trigger when you click on a row.
2. You do not have any element with id service_id. I assume you are trying to get the content of the cell with data-title="Service Id"
3. val() is used to get the value of input, select or textarea elements. To get content of cell, you need to use text() or .html(). See jquery documentation to understand the difference.
4. You have wrapped each row in a tbody tag. As such, calling sibling() on the row elements will return empty collection.
Here is the working plunker: https://plnkr.co/edit/O33Xnwvg3yslLkG3DeHT?p=info
Related
I'm a novice programmer with a basic grasp of JS and JQuery. I am using Fancybox to pull an HTML Table via Ajax and show it to users of our system.
HTML (within Fancybox):
<table>
<thead>
<tr>
<th class="priority-2 sortable date" style="min-width:150px">Date / Time</th>
<th class="priority-2 sortable text" style="min-width:150px">Changed By</th>
<th class="priority-1 sortable text" style="min-width:150px">Previous Value</th>
<th class="priority-1 sortable text" style="min-width:150px">New Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="priority-2">15/12/2021 11:23</td>
<td class="priority-2">John Smith</td>
<td class="priority-1">Stalled</td>
<td class="priority-1">Test</td>
</tr>
<tr>
<td class="priority-2">14/12/2021 16:58</td>
<td class="priority-2">David Jones</td>
<td class="priority-1">Live</td>
<td class="priority-1">Stalled</td>
</tr>
</tbody>
</table>
I have some Javascript that I use elsewhere to sort tables when the is clicked which works OK. I know that to get this to work on Ajax content I have to change the .click() to use .on() but with my my limited knowledge I cannot get the syntax to work correctly.
JS (in seperate .js file):
Original Code:
$('thead th.sortable').each(function(index, listItem) {
$(this).click(function(e){
e.preventDefault();
// sort column code here
});
});
My attempt at amending the code:
$('thead th.sortable').each(function(index, listItem) {
$(this).on('click', function(e) {
e.preventDefault();
// sort column code here
});
});
I have tried using $(document).(this) etc. but to no avail. The above works in the main HTML but not in the Fancybox window.
I use the following JS Code to show/hide sections which I've successfully adapted to work in the Fancybox window:
$(document).on('click', '.header-row', function(e) {
// Toggle Section code here
});
Any help with the syntax I need is appreciated. Apologies in advance for the poor coding knowledge.
I have the following table on a laravel blade that uses x-editable to update some of its fields (note, this is my first ever PHP project so if there are better ways to do this, please share):
<table id="LinksTable" class="table table-bordered">
<thead>
<tr>
<th>Display</th>
<th>Link Display Name</th>
</tr>
</thead>
<tbody>
<?php $link_settings = Link_setting::whereNotNull('link_address')->get();?>
#foreach($link_settings as $link_setting)
<tr id="linkRow.{{$link_setting->id}}">
<td hidden="true">{{$link_setting->id}}</td>
<td><input id="linkD.{{$link_setting->id}}" name="is_displayed"
checked="{{$link_setting->is_displayed}}"
onChange="OnDisplayChange(this)" type="checkbox"></td>
<td><a href="#" class="listEdit" data-type="text"
data-column="display_name" data-url="./link_settings/update"
data-pk="{{$link_setting->id}}" data-title="change"
data-name="display_name">{{$link_setting->display_name}}</a>
</td>
</tr>
#endforeach
</tbody>
</table>
This renders fine the first time and I can edit the display name on any of the rows with it updating the database correctly.
My problem is that I have an "add" button that creates a new object in the database. After added, I need to reload the table to display this entry as well.
function RefreshTable() {
$('.listEdit').editable("destroy");
$( "#linksTableMainDiv" ).load(location.href + " #LinksTable");
$('.listEdit').editable();
}
The table re-renders fine, but the x-editable breaks, without errors that I can locate.
For anyone coming across this post, I ended up reworking this to add a row via javascript, rather than reloading the table. Adding $('.listEdit').editable(); after the table.appendChild(row) enables all the editable fields in the new row. Assigned data-pk=0 to each, and as part of the update controller, returned the id. I then update the row's data-pk elements upon success of the editable function.
I'm currently trying to implement X-Editable in my Angular project. What I have is a table, with the possibility to add and delete entries and I want to be able to do edit them as well. What I have is the following:
HTML:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Nr.</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="users in $ctrl.users"> //user should be editable
<td>
{{$index + 1}}
</td>
<td editable-text="users">
{{users}}
</td>
<td>
<div class="btn-group">
<span ng-click="$ctrl.removeUser($index)" class="glyphicon glyphicon-trash"></span>
</div>
</td>
</tr>
</tbody>
</table>
<input ng-model="$ctrl.addMe"/>
<button ng-click="$ctrl.addUser()">Add</button>
<p id="errormessage">{{$ctrl.errortext}}</p>
JS:
class UserlistController{
constructor(){
this.users=["John","Peter","Julia"];
this.errortext="";
}
addUser(){
this.errortext="";
if(this.users.indexOf(this.addMe)==-1){
this.users.push(this.addMe);
}else{
this.errortext="The user does already exist!";
}
}
removeUser(user){
this.users.splice(user,1);
this.errortext = "";
}
}
export default UserlistController;
Editing the cell is even possible, so clicking on the cell, entering another value and then clicking on save does its job, but there is one problem: The input field that appears, appears in the next table cell, so it completely messes up the table. Does anybody happen to know, why this happens and how to fix it? You can see what it looks like here. So the x-editable cell gets to the "Action" column and the trash gets out of the table.. Any ideas?
Can't realize how you got the editable-text directive working on a td since to work properly it requires to be added to an anchor (a) tag. Therefore, I think that's what you were missing.
Just tweak your code a bit by adding the directive on an a tag instead:
<td>
<a href="#" editable-text="user">
{{user}}
</a>
</td>
Demo
Update
Here is a custom directive to accommodate the desired behavior as you mentioned in the comments. This version enables you to conceal the text itself behind the form where editing it is possible.
I need to render a table in which the user is allowed to edit some fields for each row, fields that will affect other fields in the same row.
For this reason I could not use bind-once on all the data I'm rendering.
If I got it right, simply using a code like the following
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr class="info">
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="a in alist">
<td>{{::a.id}}</td>
<td>{{::a.cod}}</td>
<td>
<input
ng-model="a.sel"
type="checkbox"
class="input-sm"></input>
</td>
<td ng-if="a.sel">
{{::a.desc}}
</td>
<td ng-if="!a.sel">
"Other Content"
</td>
</tr>
</tbody>
will cause that for each time a user checks or uncheks the a.sel checkbox, all the angular {{vars}} in the page (not the {{::vars}}) will be watched for changes.
If this is true (and therefore that's the reason why page is slow when hundreds of rows are loaded) how could I tell angular I only want it to check if something has changed inside that specific row, that specific ng-repeat iteration?
Not sure how to proceed to get good performances, any other tips are appreciated.
Try using track by to tell angular what it should be evaluating on:
<tr ng-repeat="a in alist track by $index">
or
<tr ng-repeat="a in alist track by a.id">
more on that in the ng-repeat documentation
Here I have a program which dynamically generating the rows in the table. I have very little control over these rows. As you can see below only the first cell contain the unique id for the row. I have to remove the row from DOM based on that id.
<tr class="odd">
<td class="sorting_1">
<a id="strategy_4555" class="linkable" href="/strategy/4555"> Something</a>
</td>
<td>Public</td>
<td>10,000.00</td>
<td>10,000.00</td>
<td>0</td>
<td>10,000.00</td>
<td>
<a onclick="deleteStrategy(4555)" class="btn no-radius color-red"><b>X</b></a>
</td>
</tr>
The only close answer I can think of is:
$("tr #strategy_"+id).remove();
but this will only delete the content from that cell, not the complete row. How can I do this use jquery.
Just do
$("#strategy_" + id).closest("tr").remove();