Jquery sortable index position - javascript

I try to change the index 0 by 1 at the start position in order to refresh the position in my td attribute; How can I change this?
$(document).ready(function() {
$('#sortable').sortable({
update: function(event, ui) {
var data = $(this).sortable("toArray", ui.item.attr("id"));
$(this).children().each(function(index) {
$(this).find('td.ordre').html(index + 1);
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="players" name="players" class="table table-striped">
<thead>
<tr>
<td>N°</td>
<td>Nom</td>
<td>Prénom</td>
<td>N° licence</td>
</tr>
</thead>
<tbody id="sortable">
<tr id="1" data-position="1">
<td class="ordre">1</td>
<td>Name 1</td>
<td>Surname 1</td>
</tr>
<tr id="2" data-position="2">
<td class="ordre">2</td>
<td>Name 2</td>
<td>Surname 2</td>
</tr>
<tr id="3" data-position="3">
<td class="ordre">3</td>
<td>Name 3</td>
<td>Surname 3</td>
</tr>
</tbody>
</table>

Related

How to prevent clicking on header column

How to prevent click event in a header column.
HTML:
<table>
<tr>
<th class="column">Header</th>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>
And my script
$('.column:not("th")').on('click', function(){
alert("test");
});
Why not:
$('td.column').on('click', function(){
alert("test");
});
Add tbody selector on you code
$('tbody .column').on('click', function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="column">thead</th>
</tr>
<tr>
<th class="column">thead Body 1</th>
</tr>
<tr>
<th class="column">thead Body 2</th>
</tr>
<tr>
<th class="column">thead Body 3</th>
</tr>
</thead>
<tr>
<td class="column">Header</td>
</tr>
<tr>
<td class="column">Body 1</td>
</tr>
<tr>
<td class="column">Body 2</td>
</tr>
<tr>
<td class="column">Body 3</td>
</tr>
</table>

Hide entire row when input is checked

So far I am only finding solutions to this in Jquery, but I am trying to solve this in Javascript.
I want to check a box and hide the other cells in the row's text content.
Javascript:
var rowElements = document.getElementsByClassName('tr-checked'),
for (var i = 0; i < rowElements.length; i++ ) {
rowElements[i].addEventListener('click', function(e){
var clickedElement = e.target;
if ( clickedElement.nodeName === 'input' && clickedElement.checked === true ) {
// if the clicked element is an input element, and is checked, meaning it's a checkbox, do the following:
this.parent.children.textContent = "";
}
})
}
HTML:
<table>
<thead>
<tr>
<td></td>
<td class="column-a">Course 1</td>
<td class="column-b">Course 2</td>
<td class="column-c">Course 3</td>
</tr>
</thead>
<tbody>
<tr class="row-a tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 1</td>
<td class="column-b">Specification 1</td>
<td class="column-c">Specification 1</td>
</tr>
<tr class="row-b tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 2</td>
<td class="column-b">Specification 2</td>
<td class="column-c">Specification 2</td>
</tr>
<tr class="row-c tr-checked">
<td><input type="checkbox"></input></td>
<td class="column-a">Specification 3</td>
<td class="column-b">Specification 3</td>
<td class="column-c">Specification 3</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
You can do it like this,
var rowElements = document.querySelectorAll('.tr-checked input[type="checkbox"]');
for (var i = 0; i < rowElements.length; i++) {
rowElements[i].addEventListener('change', function(e) {
var nextElement = this.parentElement.nextElementSibling;
while(nextElement) {
nextElement.style.display = this.checked ? "none" : "table-cell";
nextElement = nextElement.nextElementSibling;
}
});
}
DEMO
Here is my solution:
<table>
<thead>
<tr>
<td></td>
<td class="column-a">Course 1</td>
<td class="column-b">Course 2</td>
<td class="column-c">Course 3</td>
</tr>
</thead>
<tbody>
<tr class="row-a tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 1</td>
<td class="column-b">Specification 1</td>
<td class="column-c">Specification 1</td>
</tr>
<tr class="row-b tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 2</td>
<td class="column-b">Specification 2</td>
<td class="column-c">Specification 2</td>
</tr>
<tr class="row-c tr-checked">
<td>
<input type="checkbox" onchange="say(this)"></input>
</td>
<td class="column-a">Specification 3</td>
<td class="column-b">Specification 3</td>
<td class="column-c">Specification 3</td>
</tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>
</table>
Javascript
function say(v)
{
$(v.parentNode.parentNode).hide();
}

html table rows height issue

Okay so I made that table which I want it too look like a gradebook but I cant edit the row heights.
In the picture below I drew a line around the rows I want their size to be decrease so they can look different than the student's rows.
and heres the HTML
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 table-responsive">
<table class="table table-bordered" style="background-color:white;">
<tbody>
<tr>
<th rowspan="4">Student</th>
<th>Assignment</th>
<td>Assignment 1</td>
<td>Assignment 2</td>
<td>Assignment 3</td>
<td>Assignment 4</td>
</tr>
<div>
<tr>
<th>Category:</th>
<td>Category 1</td>
<td>Category 2</td>
<td>Category 3</td>
<td>Category 4</td>
</tr></div>
<tr>
<th>Due:</th>
<td>Due 1</td>
<td>Due 2</td>
<td>Due 3</td>
<td>Due 4</td>
</tr>
<tr>
<th>Points:</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Moemen Waleed</td>
<td>90% A-</td>
<td>Moemen 1</td>
<td>Moemen 2</td>
<td>Moemen 3</td>
<td>Moemen 4</td>
</tr>
<tr>
<td>Mazen Waleed</td>
<td>93% A</td>
<td>Mazen 1</td>
<td>Mazen 2</td>
<td>Mazen 3</td>
<td>Mazen 4</td>
</tr>
</tbody>
</table>
</div>
Add this style to your hmtl:
<style>
tr:nth-child(-n+4){
line-height: 10px;
min-height: 10px;
height: 10px;
}
</style>
This styles all first four rows in the table.
Here is the result: https://jsfiddle.net/Lbx8xh1a/4/
You can add line-height to that <tr> tags.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-12 table-responsive">
<table class="table table-bordered" style="background-color:white;">
<tbody>
<tr style="line-height: 6px;">
<th rowspan="4">Student</th>
<th>Assignment</th>
<td>Assignment 1</td>
<td>Assignment 2</td>
<td>Assignment 3</td>
<td>Assignment 4</td>
</tr>
<div>
<tr style="line-height: 6px;">
<th>Category:</th>
<td>Category 1</td>
<td>Category 2</td>
<td>Category 3</td>
<td>Category 4</td>
</tr></div>
<tr style="line-height: 6px;">
<th>Due:</th>
<td>Due 1</td>
<td>Due 2</td>
<td>Due 3</td>
<td>Due 4</td>
</tr>
<tr style="line-height: 6px;">
<th>Points:</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>Moemen Waleed</td>
<td>90% A-</td>
<td>Moemen 1</td>
<td>Moemen 2</td>
<td>Moemen 3</td>
<td>Moemen 4</td>
</tr>
<tr>
<td>Mazen Waleed</td>
<td>93% A</td>
<td>Mazen 1</td>
<td>Mazen 2</td>
<td>Mazen 3</td>
<td>Mazen 4</td>
</tr>
</tbody>
</table>
</div>

Using JQuery to select all <tr> elements with a specific class

The basic structure is a table with a few rows. I would like the top half of the table showing and the bottom half collapsed until a user clicks on the READ MORE cell. I have that functionality working but I can't get the JQuery right that selects all of the ".collapseThis" rows and hides them on page load.
Here is the table
<div id="tables">
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
</div>
Here is the JQuery.
$(document).ready(function () {
function getCollapsable($row) {
var children = [];
while ($row.next().hasClass('collapseThis')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
function hideTableRows($row) {
children = getCollapsable($row);
$.each(children, function () {
$(this).toggle();
});
}
$('#tables').each($('expandableTable'), function () {
hideTableRows($(this).children().hasClass('.accordion'));
});
You can just use css to set the display value, there is no need to use jQuery to set the initial state.
If you want to use jQuery, use a simple selector like $('#tables .expandableTable .collapseThis').hide().
$(document).ready(function() {
//if you don't want to use css
//$('#tables .expandableTable .collapseThis').hide();
});
#tables .expandableTable .collapseThis {
display: none;
}
<div id="tables">
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>

Resizable columns tables with fixed header

I'm trying to create a table with resizable columns and fixed header.
But when I'm trying to drag the header column, table columns change their size, but some gap is created.
For example:
What I get after dragging:
My sample:
<script>
$(document).ready(function(){
$('#tableHeader').colResizable({
liveDrag: true,
onDrag: resFun
});
function resFun() {
var c1 = $('#c1').width();
var c2 = $('#c2').width();
var c3 = $('#c3').width();
$('.c1').width(c1);
$('.c2').width(c2);
$('.c3').width(c3);
};
resFun();
});
</script>
<div style="padding-right: 17px; height: 39px;">
<table class="table table-bordered" id="tableHeader" style="width: 100%; height: 39px;">
<tr>
<th id="c1">first</th>
<th id="c2">second</th>
<th id="c3">third</th>
</tr>
</table>
</div>
<div style="overflow: auto; height: 200px;">
<table class="table table-bordered" id="table">
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
</table>
</div>
The problem is that the cells of the second table have a padding set and the cells of the header doesn't.. add padding to the header as well and should be ok

Categories