I am using a plugin that allows me to utilize tables with an expansion section which will show more content when clicked.
While the plugin is working, I am trying to tweak a piece of code and can't quite get it right.
There is a click event on the whole row and if my row contains a link, its navigating to the link as well as expanding the row which is not desired behavior. I would like to make the click event only happen when clicking the expansion arrow.
$('.table-expandable').each(function() {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
// This is the event that is linked to the whole table row
table.children('tbody').children('tr').filter(':even').click(function() {
var element = $(this);
element.next('tr').toggle('slow');
element.find(".table-expandable-arrow").toggleClass("up");
});
table.children('tbody').children('tr').filter(':even').each(function() {
var element = $(this);
element.append('<td><div class="table-expandable-arrow"></div></td>');
});
});
I tried adding in another piece of logic to the event but that didn't work:
table.children('tbody').children('tr').filter(':even').find('.table-expandable-arrow').click(function() {
Any ideas of what I can try to have the arrow be the trigger instead of the whole row?
Update:
<tr class="primaryValue ">
<td class="small"><a target="_BLANK" href="tool.php?tool=30">30</a></td>
<td class="small">Quickload</td>
<td class="small">Web</td>
<td class="small">John Doe</td>
<td class="small">john#test.com</td>
<td class="small">Omaha</td>
<td class="small">123456</td>
<td class="small">N/A</td>
<td>
<div class="table-expandable-arrow"></div>
</td>
</tr>
The problem with your code is that by that time that you search for .table-expandable-arrow - there is still no such element in your DOM (this element is created only in the after the this call).
Instead - you can change your code to make sure to attach the click event to the arrow during the creation of the element.
Here is an example:
(function ($) {
$(function () {
$('.table-expandable').each(function () {
var table = $(this);
table.children('thead').children('tr').append('<th></th>');
table.children('tbody').children('tr').filter(':odd').hide();
table.children('tbody').children('tr').filter(':even').each(function () {
var element = $(this);
arrowElement = $('<div class="table-expandable-arrow"></div>')
arrowElement.on('click', function () {
$(this).parents('tr').next('tr').toggle('slow');
$(this).toggleClass("up");
});
td = $('<td></td>').append(arrowElement)
element.append(td);
});
});
});
})(jQuery);
table.table-expandable > tbody > tr:nth-child(odd) {
cursor: auto !important;
}
.table-expandable-arrow {
cursor: pointer;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Bootstrap-Table-Rows/css/bootstrap-table-expandable.css">
<div class="container">
<h1 style="margin-top:150px;">jQuery Bootstrap Table Expandable Demo</h1>
<table class="table table-hover table-expandable table-striped">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>USA on Wikipedia</li>
<li>National Atlas of the United States</li>
<li>Historical Documents</li>
</ul></td>
</tr>
<tr>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>UK on Wikipedia</li>
<li>Official tourist guide to Britain</li>
<li>Official Yearbook of the United Kingdom</li>
</ul></td>
</tr>
<tr>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240 km2</td>
<td>Hindi, English</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>India on Wikipedia</li>
<li>Government of India</li>
<li>India travel guide</li>
</ul></td>
</tr>
<tr>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>Canada on Wikipedia</li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official
Government of Canada online Atlas of Canada</a></li>
<li>Canada travel guide</li>
</ul></td>
</tr>
<tr>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
</tr>
<tr>
<td colspan="5"><h4>Additional information</h4>
<ul>
<li>Germany on Wikipedia</li>
<li>Deutschland.de Official Germany portal</li>
<li>Germany Travel Info</li>
</ul></td>
</tr>
</tbody>
</table>
Note that I also added some css changes to make sure the cursor is not set to pointer when you hover the entire row, but only on the arrow.
Related
I have simple table made in jQuery:
<div id="tabs">
<ul>
<li>Al-Ar</li>
<li>Ar-D</li>
<li>E-Ha</li>
<li>Ha-J</li>
<li>K-Mo</li>
</ul>
<table class="tablica">
<tbody>
<tr class="tr1">
<td></td>
</tr>
<tr class="tr">
<td>
<div id="tabs-1">
<table class="pol">
<tbody>
<tr>
<td class="td10" colspan="4">Al..Ar</td>
</tr>
<tr>
<td class="td1">1</td>
<td class="td2">1</td>
</tr>
<tr>
<td class="td1">2</td>
<td class="td2">2</td>
</tr>
...
<tr>
<td class="td1">205</td>
<td class="td2">205</td>
</tr>
</tbody>
</table>
</div>
</tr>
<tr class="tr1">
<td></td>
</tr>
</tbody>
</table>
</div>
(On the start page only the first page of the table is displayed)
Plus script:
<script>
$('#tabs a').click(function(e) {
e.preventDefault();
var url = "./tabsContent1.php";
var urlId = $(this).attr("href");
// ajax load from href
$(".tabs-content").load(url + " " + urlId);
});
</script>
Where tabsContent1.php contains the rest of the table.
Unfortunately, the above code causes that when any element of the table is clicked, it disappears! Only the table of contents bar is visible. After clicking on any page, everything returns to normal. So this problem only appears on the first click.
An additional problem is the fact that the pages from the table (these are interactive links) appear full-screen despite the script on the main page:
<script>
<!--
onload=function(){
for(i=0;d=document.getElementsByTagName('a')[i++];){
if (d.href.match(/.*hotel\d+\.html/)){
d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false}
}
}
}
//-->
</script>
How to change it?
First of all a background of what i want to achieve,
<tr ng-repeat-start="eachParam in myArray">
<td rowspan=2>On site</td>
<td rowspan="2" class = "success">{{eachParam.support}}</td>
<td class = "warning">FE</td>
</tr>
<tr>
<td class = "warning">BE</td>
</tr ng-repeat-end>
I expected it to create a structure like below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table class = "table table-bordered">
<tbody>
<!-- Repeat 1-->
<tr>
<td rowspan = 2>super parent1</td>
<td rowspan = 2>parent1.1</td>
<td>child 1.1.1</td>
</tr>
<tr>
<td>child 1.1.2</td>
</tr>
<!-- Repeat 2-->
<tr>
<td rowspan = 2>super parent2</td>
<td rowspan = 2>parent2.1</td>
<td>child 2.1.1</td>
</tr>
<tr>
<td>child 2.1.2</td>
</tr>
</tbody>
</table>
you can see in the snippet that, i want to repeat those two super parents using ng-repeat-start and ng-repeat-end so that the intermediate <tr> won't be left out while i am out repeating the super parent or the parent.
Please note the childs are static element.
Now the exception i am getting is:
Unterminated attribute, found 'ng-repeat-start' but no matching
'ng-repeat-end' found
You should add ng-repeat-end to the opening of the tr tag, not the closing tag. Like this:
<tr ng-repeat-start="eachParam in myArray">
<td rowspan=2>On site</td>
<td rowspan="2" class = "success">{{eachParam.support}}</td>
<td class = "warning">FE</td>
</tr>
<tr ng-repeat-end>
<td class = "warning">BE</td>
</tr>
I am trying to select a class which is from the same table (and row).
If the user clicks on "Remove", I need to grab the text from "form_delete_id".
Unfortunately I get an empty string back. I tried "closest()" and "parent()" without luck.
This is my code:
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
And the Javascript below it:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).closest(".form_delete_id").text());
});
</script>
My code can also be found on JSFIDDLE
.form_delete_id is sibling element of clicked .form_delete_id .You need to use .siblings() instead of .closest():
$(function(){
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
Try getting the parent and searching it for the delete id:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).parent().find(".form_delete_id").text());
});
</script>
or using sibiling
<script>
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
</script>
https://jsfiddle.net/t8okf8kc/
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>
I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?
Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');
ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!
try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
DEMO