Check my code bellow. When i click More button its display all rows after 6th number. But my goal is to use it on multiple table because the table is generated dynamically on my project. I am having lot of tables so it needs to be work with multiples table. I have tried to use same on two table now when i click on button another table also displays. Whats the solution then for multiple tables?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
<script type="text/javascript">
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
</script>
</body>
</html>
You have made some several mistakes in your jquery:
1) As you says all elements will be dynamically generated, so the elements will never get fires the click event, you must use on() for dynamic elements.
2) Use classes for buttons instead of id. Id must be unique.
3) Use prev() method with this, wich reference to button, so you will always be in the table wich correspond the button clicked.
4) Use each() method to iterate over all tables and hide the tr all you need, like you actually have it only works for the first table.
5) You arent using slice propertly, wich selects a subset of elements based on its index.
Heres the working example:
$(document).ready(function() {
$(".table").each(function() {
$(this).find('tr').slice(7).hide();
});
$(".expendbtn").html("More");
$(document).on("click", '.expendbtn', function() {
if ($(this).text() == "More") {
$(this).prev(".table").find("tr").show();
$(this).html("Less");
} else {
$(this).prev(".table").find('tr').slice(7).hide();
$(this).html("More");
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat 1</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat 2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info expendbtn"></button>
</div>
</div>
</body>
</html>
You should never use an id more than once. The better way to do it is to use a class instead of an id.
Provided in the jsfiddle is a working example.
$(".table").find("tr").hide().slice(0, 7).show();
$(".expendbtn").html("More");
$(".expendbtn").click(function() {
if ($(this).text() == "More") {
console.log($(this).parent());
$(this).parent().find('.table').find("tr").show();
$(this).html("Less");
} else {
$(this).parent().find('.table').find("tr").hide().slice(0, 7).show();
$(this).html("More");
}
});
http://jsfiddle.net/g8fzxzcc/1
Your problem is button has the same ID.
In HTML, id attribute must be unique in page
Use class attribute instead.
This should work :
<button type="button" class="btn btn-info expendbtn"></button>
<script>
$(".table").find("tr").hide().slice(0, 7).show();
$(".expendbtn").html("More");
$(".expendbtn").click(function() {
var foundTr = $(this).parent().find('tr');
if ($(this).text() == "More") {
foundTr.show();
$(this).html("Less");
} else {
foundTr.hide().slice(0, 7).show();
$(this).html("More");
}
});
</script>
Otherwise, i advice people to use jquery.Datatable plugin, it's
fantastic ! It contains automatic search field, pagination, ajax loading, and expandable rows like you want ;)
You can remove the ids from the more/less buttons and use class (or just rename the ids but still add a class):
<button type="button" class="btn btn-info btn-expand">More</button>
And use the class as the selector:
$('.btn-expand').click(function () {
var $btn = $(this);
var $rows = $btn.prev('.table').find('tr');
if ($btn.text() === 'More') {
$rows.show();
$btn.text('Less');
} else {
$rows.slice(7).hide();
$btn.text('More');
}
});
Also, jQuery's slice creates a new jQuery object containing all the matching elements. So what you're doing is creating a jQuery object with all the rows from all the tables. If that's not what you want, your code should probably be:
$('.table').each(function () {
$(this).find('tr').slice(7).hide();
});
$('.table').each(function () {
$(this).find('tr').slice(7).hide();
});
$('.btn-expand').click(function () {
var $btn = $(this);
var $rows = $btn.prev('.table').find('tr');
if ($btn.text() === 'More') {
$rows.show();
$btn.text('Less');
} else {
$rows.slice(7).hide();
$btn.text('More');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info btn-expand">More</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info btn-expand">More</button>
</div>
</div>
Here you go with a solution
$(".table").find("tr").hide().slice(0, 7).show();
$('button').html("More");
$("button").click(function() {
if ($(this).text() == "More") {
$(this).siblings('table').find("tr").show();
$(this).html("Less");
} else {
$(this).siblings("table").find("tr").hide().slice(0, 7).show();
$(this).html("More");
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info""></button>
</div>
</div>
</div>
I've used jQuery siblings to get the table.
id should be unique.
Hope this will help you.
Related
In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});
You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.
You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
Check the code bellow. My code currently working fine but when I click "More" button its expends all rows and once i click "Less" it collapse all rows. My goal is: by default display only first 6 rows when I click more it will load reset all available rows. Then when I click "Less" it will collapse only the expended rows the 6 rows will be as like default position. And if the rows less then 6 then this button will just not do anything. Also if possible I wanted slow dropdown not slow hide/show.
How can I achieve that?
$(".table").children("tbody").hide();
$("#expendbtn").html("More");
$("#expendbtn").click(function(){
if ($("#expendbtn").text()=="More") {
$(".table").children("tbody").show("slow");
$("#expendbtn").html("Less");
} else {
$(".table").children("tbody").hide("slow");
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
This will work for you.
A simple tweak inside you script, I have changed this ↓
$(".table").children("tbody").hide();
to this ↓
$(".table").find("tr").hide().slice(0, 7).show();
A working fiddle for you. ↓
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Updated 2 with transition
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").removeClass('slideUp');
$("#expendbtn").html("Less");
} else {
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
}
});
.table tbody{
}
.table tr{
transition: all ease-in-out 0.4s;
overflow:hidden;
max-height:100px;
}
.table tr.slideUp{
transform: scaleY(0);
display:block;
max-height:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Here you go with a solution https://jsfiddle.net/v5pvxujp/1/
$("#expendbtn")
.html("More")
.click(function(){
if ($("#expendbtn").text()=="More") {
$('table tr:nth-child(n+7)').fadeIn('slow');
$("#expendbtn").html("Less");
} else {
$('table tr:nth-child(n+7)').fadeOut('slow');
$("#expendbtn").html("More");
}
});
.hideRow {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
Hope this will help you.
A working, shorter and expendable example:
/**
* Hide every row from +irow+
* If +animateIt+ is true, animate the dropdown
*
*/
function hideRowsStartingAt(irow, animateIt)
{
$(".table tbody").children("tr:nth-child(n+"+irow+")").hide(animateIt ? 'slow' : null);
}
// Set up
hideRowsStartingAt(7);
$("#expendbtn").html("More");
// Wait (for click) and see
$("#expendbtn").click(function(){
// Collapse or expend ?
var doExpend = $("#expendbtn").text() == "More" ;
if ( doExpend )
{
$(".table tbody").children("tr").show('slow');
}
else // doCollapse
{
hideRowsStartingAt(7, true);
}
// Button name is now…
$("#expendbtn").html(doExpend ? 'Less' : 'More') ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
I got the following code:
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp"
});
function generateTicker(returndata) {
console.log(returndata);
}
But nothing happens. In the console Im getting this message:
"Resource interpreted as Script but transferred with MIME type text/html"
Here is JSfiddle: http://jsfiddle.net/8k8souqj/
Thanks in advance.
EDIT:
Most of you are pointing out the URL does not return valid json. But if I use a modify header extension for chrome and accept "application/javascript" as a header I do get valid javascript:
generateTicker([{"HouseAbbreviation":"LIL","ClosesOn":"2014-10-15T02:10:00","HouseName":"Illinois Noche","Drawings":[{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":2,"PostedNumbers":"3-0"},{"HouseAbbreviation":"LIL","HouseName":"Illinois Noche","ClosesOn":"2014-10-15T02:10:00","BallCount":3,"PostedNumbers":"6-3-0"}... etc
EDIT 2:
Apparently the problem is that jsonp cannot use modified headers as this is not possible via the script tag. Hence the URL will always return html. Thanks to all
That code fetches an HTML page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Winning Numbers</title>
<link rel="stylesheet" type="text/css" href="/assets/css/webordertaker.css" />
<link rel="stylesheet" type="text/css" href="/Content/css/select2.css" />
<script type="text/javascript" src="/Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/Scripts/select2.min.js"></script>
<script type="text/javascript" src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body id="winningNumbersView">
<div id="layoutContainer">
<h2>Números Ganadores</h2>
<table class="table" id="winningNumbersTable">
<thead>
<tr>
<th>Fecha</th>
<th>Casa</th>
<th>Números</th>
</tr>
</thead>
<tbody>
<tr>
<td>14/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-0</td>
<td>6-3-0</td>
<td>7-9-2-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-5</td>
<td>4-3-5</td>
<td>0-9-6-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>4-1</td>
<td>3-4-1</td>
<td>9-9-7-6</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-9</td>
<td>1-3-9</td>
<td>9-9-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-6</td>
<td>8-7-6</td>
<td>6-1-1-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>76-61-14</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-3</td>
<td>5-9-3</td>
<td>6-4-6-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-6</td>
<td>0-9-6</td>
<td>1-4-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-2</td>
<td>2-5-2</td>
<td>3-9-2-3</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>3-2</td>
<td>1-3-2</td>
<td>6-8-7-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>85-02-78</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>14/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-5</td>
<td>6-8-5</td>
<td>0-2-7-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LIL Illinois Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>2-8</td>
<td>8-2-8</td>
<td>0-1-3-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LFL Florida Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>6-5</td>
<td>0-6-5</td>
<td>5-0-8-2</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>NPR Puerto Rico Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-6</td>
<td>4-5-6</td>
<td>9-4-1-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNJ Nueva Jersey Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>4-7-5</td>
<td>7-1-1-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYMAR Marriage NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNYBOR Borlette NY Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>71-62-44</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>LNY Nueva York Noche</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-1</td>
<td>2-7-1</td>
<td>6-2-4-4</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>DPR Puerto Rico Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>7-5</td>
<td>0-7-5</td>
<td>5-2-6-0</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EIL Illinois Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>9-8</td>
<td>0-9-8</td>
<td>8-1-5-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>EFL Florida Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>5-5</td>
<td>9-5-5</td>
<td>2-6-6-8</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENJ Nueva Jersey Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>0-0</td>
<td>5-0-0</td>
<td>0-7-2-7</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENY Nueva York Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</thead>
<tbody>
<tr>
<td>8-4</td>
<td>1-8-4</td>
<td>3-2-9-9</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYMAR Marriage NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>13/10/14</td>
<td>ENYBOR Borlette NY Día</td>
<td>
<table class="inner-table">
<thead>
<tr>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>84-32-99</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="/Scripts/iframeResizer.contentWindow.js"></script>
</body>
</html>
...but HTML is not valid JSONP.
The callback will never work this way. You will have to add your callback to you ajax request.
var url = 'https://lottery.lafunda.com.do/Lottery/WinningNumbers?key=664cf843-8904-4212-9503-d4733651f519&gobackdays=2&grouped=true&language=es-DO&callback=generateTicker';
$.ajax({
url: url,
accept: "application/javascript",
dataType: "jsonp",
success: generateTicker
});
function generateTicker(returndata) {
console.log(returndata);
}
Your issue is the combination of the two errors, as Jerodev mention, the way you call callback method won't work, and also, what you mentioned the way you send the accept header is not proper either
The following should work
$.ajax({
headers: {
Accept: "application/javascript"
},
url: url,
data: "jsonp",
success : generateTicker
})
function generateTicker(returndata) {
console.log(returndata);
}
The working fiddle
http://jsfiddle.net/8k8souqj/13/
Fiddle Example
I have two example tables with subject titles in the first cells.
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable?
How can I make a whole column sortable in the change or start event?
Here's my expected output:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS code:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});
What about something like this?
It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
JS
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});
This should be any easy one for you. I want to have a table with rows that expand. I am trying to implement JQuery accordion on class="Accordion1".
it does not work at all.
What am I doing wrong?
...
<script>
$(function() {
$( "th.Accordion1").accordion();
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th colspan="2" class="Accordion1">GROUP 1</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
<tr>
<th colspan="2" class="Accordion1">GROUP 2</th>
</tr>
<tr>
<th>Name</th>
<th>Note</th>
</tr>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
Thanks!
I believe you want to use the header option of jQuery Accordion.
$(function () {
$('table').accordion({header: '.accordion1' });
});
http://api.jqueryui.com/accordion/#option-header
I realize that this post is quite old but I have two different solutions for the problem stated and thought to post them anyway, maybe someone is thankful for it.
You can find two options on my Pen.
One including "Group 1" and "Group 2"...
<div class="options" id="op1">
<div class="accordion">
<h3>GROUP 1</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
</table>
<h3>GROUP 2</h3>
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</div>
And one without
<div class="options" id="op2">
<table>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>-</td>
</tr>
</tbody>
<thead>
<th>Name</th>
<th>Note</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>-</td>
</tr>
<tr>
<td>2</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
Be aware that for this to work you have to include jquery and jquery-ui!
The options I've added for the accordion and the CSS are optional... ;)