I am using this jsfiddle: http://jsfiddle.net/vaDkF/828/
(without the top and bottom option) to create a reordering table.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
I would like to know if it is possible to have the up button disappear (display none) if it is the first row in the table, and the down button disappear if it is the last row in the table.
Thanks!
You can use CSS for this, with first-child and last-child selectors:
tr:first-child .up, tr:last-child .down {
display:none;
}
$(document).ready(function() {
$(".up,.down").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
tr:first-child .up,
tr:last-child .down {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Updated Demo
Related
I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.
var count = 1;
function setColor(button, color) {
var property = document.getElementsByClassName("button");
if (count == 0) {
property.style.backgroundColor = "#A94E3B"
count = 1;
}
else {
property.style.backgroundColor = "#EAE8E8"
count = 0;
}
}
this way, with event delegation and classList toggle
const myTable = document.getElementById('my-table')
myTable.onclick = e =>
{
if (!e.target.matches('#my-table button')) return
e.target.classList.toggle('orange')
}
#my-table button {
background-color : yellow;
}
#my-table button.orange {
background-color : orange;
}
table {
border-collapse : collapse;
}
table th,
table td {
padding : .2em .8em;
border : 1px solid darkblue;
text-align : center;
}
table thead {
background-color : #c3e3ee;
}
table td:first-of-type {
width : 8em;
}
<p> Click a button to change its color and click again to reset! </p>
<table id="my-table">
<thead>
<tr> <th colspan="2" >My items:</th> </tr>
</thead>
<tbody>
<tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
</tbody>
</table>
To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.
Example:
var count = 1;
function setColor(e, color) {
e.style.backgroundColor = color;
}
<html>
<head>
<script>
</script>
</head>
<body>
<p> Click a button to change its color and click again to reset! </p>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">My items:</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Item 1</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 2</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 3</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr class="hide">
<td contenteditable="true">Item 4</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 5</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table that needs to have an undefined number of rows that should display a set number of elements when clicked (in this case div, because I read that it's the best way to use toggle on tr). Best I could do is make it for an already set number of elements...
jsfiddle.net - This is with the set number of elements.Working code..
And this is all I got so far trying to figure it out.
Working js code:
$('.warning').on('click', function(e) {
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
});
In this case, I need each clicked table row to display three corresponding divs.
Obviously, answer with jQuery but I would appreciate a solution in vanilla js as well.
EDIT: I am sorry, I neglected to mention I want to add a sliding animation. And slideToggle doesn't seem to work...
EDIT2: Marked best answer by Terry.
Changed fiddle to working code.
We can actually greatly simplify your markup for your table rows:
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
...and use the following logic:
.nextUntil('.warning') to select the trailing <tr> after each .warning element. See the documentation for .nextUntil().
Use .slideToggle() to show/hide elements, without the need to use overly verbose CSS detection
Here is the logic above, written in jQuery:
$('.warning').on('click', function() {
// Selects all siblings until the next `.warning` <tr>
var $ele = $(this).nextUntil('.warning').find('td > div');
$ele.slideToggle();
});
If you only want to target downstream <tr> that has the class hidden (useful in the scenario where there might be other irrelevant <tr>s in the way that you do not want to toggle), you might want to add an optional filter instead:
$('.warning').on('click', function() {
// Selects all siblings until:
// 1. the next `.warning` <tr>, and
// 2. has the class "hidden"
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
Of course this means that you get strange stacked borders when hiding elements, because you are technically hiding the table row content, but not collapsing the table rows/cells themselves.
Here is a proof-of-concept example:
$(function() {
$('.warning').on('click', function() {
var $ele = $(this).nextUntil('.warning').filter(function() {
return $(this).hasClass('hidden');
}).find('td > div');
$ele.slideToggle();
});
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden td div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
<tr class="hidden">
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
<td>
<div>Hidden.</div>
</td>
</tr>
</tbody>
</table>
Please see below snippet , note that I've set all the hidden class , class='hidden' , it's usless to name each of them differntly :
$(".warning").on("click",function(){
$(this).nextUntil(".warning").find(".hidden").slideToggle();
})
table {
width: 75%;
border-collapse: collapse;
}
tr, td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden, .hidden1, .hidden2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td> <td>Name</td> <td>Age</td>
</tr>
<tr class="active">
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
<td>
<div class="hidden">Hidden.</div>
</td>
</tr>
</tbody>
</table>
$(".warning").on("click", function() { use jQuery .on will add the event to dynamic element (future generated element).
then find the next hidden and toggle will do the trick.
check the example:
$(".warning").on("click", function() {
var nextHidden = $(this).next('.hidden');
nextHidden.find('div').slideToggle();
});
table {
width: 75%;
border-collapse: collapse;
}
tr,
td {
border: 2px solid #AEAEAE;
padding: 0;
}
td {
width: 50px;
}
.hidden div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
<tr class="warning">
<td>Click to show</td>
<td>Name</td>
<td>Age</td>
</tr>
<tr class="active hidden">
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
<td>
<div class="">Hidden.</div>
</td>
</tr>
</tbody>
</table>
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
I have a table within which I want a user to be able to click on any table row, and when they do, it will change the background color of that table row to show that it is highlighted, that's the one that has been selected. I also want them to be able to be able to then select a different table row within that same table, which then should remove the background color from the previous row, and change the newly selected table row to the highlight background color.
So I have
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
I would imagine I would have a CSS class like isSelected or something similar, which would be added to the clicked row, and removed from the previous row that has that class. I'm just not sure how to do it. Anyone able to help?
You idea is correct. You can implement it like following.
$('.clientRow').click(function(){
$('.clientRow.isSelected').removeClass('isSelected');
$(this).addClass('isSelected');
});
.isSelected {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
<tr class="clientRow">
<td>
Referral Type Description
</td>
<td>
Referral Date
</td>
</tr>
</table>
On row click, remove selected class from all rows, then add this class to the clicked row:
$(document).on('click', 'tr', function() {
var that = $(this);
that.closest('table').find('tr').removeClass('selected');
that.addClass('selected');
});
table td {
padding:5px 50px;
border:1px solid #d8d8d8;
}
table tr.selected td { background-color: #f1f1f1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tbody>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</tbody>
</table>
Here is a solution using jQuery.
$(function() {
$('.table1 tr').click(function() {
$this = $(this);
$('.table1 tr').removeClass("selected");
$this.addClass("selected");
});
});
table {
border-collapse: collapse
}
td {
cursor: pointer;
padding: 5px 15px;
border: 1px solid grey;
}
tr.selected td {
background-color: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
<tr>
<td>1</td>
<td>Title 1</td>
</tr>
<tr>
<td>2</td>
<td>Title 2</td>
</tr>
<tr>
<td>3</td>
<td>Title 3</td>
</tr>
<tr>
<td>4</td>
<td>Title 4</td>
</tr>
</table>
You might need to do something like this:
$(function() {
// function that adds/removes a css class
var changeBg = function() {
// remove active class from all elements
$('tr, td').removeClass('active');
// add active class to element clicked only
$(this).addClass('active');
};
// bind clicking event to function
$('tr, td').on('click', changeBg);
});
.active {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
<tr class="clientRow">
<td>
#Html.DisplayFor(x => x.ReferralTypeDescription)
</td>
<td>
#Html.DisplayFor(x => x.ReferralDate)
</td>
<td>
#Html.DisplayFor(x => x.ReferralStatus)
</td>
<td>
#Html.DisplayFor(x => x.ContactNo)
</td>
</tr>
</table>
I have numbers of rows in a grid. The first column is an checkbox. If I check that checkbox and click on delete button, the checked row should be delete. Incase If I check more than 10 rows randomly, the selected rows should be delete. How can I do this using jquery.
JsFiddle
Please look at this fiddle. Here, if I select 2nd and 5th row checkbox and if i press delete button, the 2nd and 5th row should be delete. It should happen dynamically not in static. As an example I have mension 2nd and 5th. If I select multiple checkbox in a table, need to delete all selected rows. Please help me how can I do this?
#codexpl th, #codexpl td{
padding:0.8em;
border: 1px solid;
}
#codexpl th{
background-color:#6699FF;
font-weight:bold;
}
<br><br>
<input type="button" value ="Delete">
<table id="codexpl">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Coloumn</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>first</td>
<td>One</td>
<td>Coloumn</td>
</tr>
</table>
Use on handler on button and use :checked selector to find checked elements.
.remove() will delete set of matched elements from DOM
Try this:
$('[type="button"]').on('click', function() {
$('td input:checked').closest('tr').remove();
});
#codexpl th,
#codexpl td {
padding: 0.8em;
border: 1px solid;
}
#codexpl th {
background-color: #6699FF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<br>
<br>
<input type="button" value="Delete">
<table id="codexpl">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Coloumn</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>first</td>
<td>One</td>
<td>Coloumn</td>
</tr>
</table>
Fiddle here
Bind the click handler of Delete button using .on(), find the :checked checkbox then use .closest() method to traverse up to tr element, then use .remove().
For simplicity, I have added id to the button as btnDelete
$(function() {
$('#btnDelete').on('click', function() {
$('#codexpl :checkbox:checked').closest('tr').remove();
});
});
$(function() {
$('#btnDelete').on('click', function() {
$('#codexpl :checkbox:checked').closest('tr').remove();
});
});
#codexpl th,
#codexpl td {
padding: 0.8em;
border: 1px solid;
}
#codexpl th {
background-color: #6699FF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<input type="button" id="btnDelete" value="Delete">
<table id="codexpl">
<tr>
<th>#</th>
<th>Columna</th>
<th>Relative</th>
<th>Isso</th>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>This</td>
<td>Column</td>
<td>Is</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Coloumn</td>
<td>two</td>
<td>this</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>is</td>
<td>not equals</td>
<td>a</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>the</td>
<td>Column</td>
<td>real</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>first</td>
<td>One</td>
<td>Coloumn</td>
</tr>
</table>
Try this : Register a click handler for delete button (assigne some id to button as shown below). Inside click handler, find all check boxes in table and call remove on parent tr using closest.
Note: Don't forget to include jQuery library file in your code.
e.g. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
HTML:<input type="button" value="Delete" id="deleteBtn">
jQuery:
$(function() {
$("#deleteBtn").click(function() {
$("#codexpl").find("input[type='checkbox']:checked").closest("tr").remove();
});
});
JSFiddle Link