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
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>
Check out this fiddle link.
So suppose you select two rows (by clicking check box )at first and add some text in text box then the array of objects will be having two objects with that property but second time he selects one row out of that two rows and deselect other one and give some value in text box , we have to update the object with that in that array , currently its adding another object
Also , if he selects any other row , which company is not present in the array, its should add it as another object.
How to write that in that each checked function?
HTML:
<table>
<tr>
<th>checkbox</th>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Alfreds </td>
<td>Maria </td>
<td>Germany</td>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Centro </td>
<td>Francisco </td>
<td>Mexico</td>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Ernst </td>
<td>Roland </td>
<td>Austria</td>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Island </td>
<td>Helen </td>
<td>UK</td>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Laughing </td>
<td>Yoshi </td>
<td>Canada</td>
</tr>
<tr>
<td><input name="eachRow" type="checkbox" /> </td>
<td>Magazzini </td>
<td>Giovanni </td>
<td>Italy</td>
</tr>
CSS:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
Jquery:
var selectedRows = [];
function getdetails() {
var modifier = $('#txtBox').val();
$.each($("input[name='eachRow']:checked").parents("tr"), function () {
selectedRows.push({
company: $(this).find('td:eq(1)').text(),
contact: modifier
});
console.log(selectedRows);
});
}
Code is doing exactly what it suppose to, each time you click on the button, the method pushes into array all the checked objects. if you do:
function getdetails() {
var selectedRows = [];
var modifier = $('#txtBox').val();
$.each($("input[name='eachRow']:checked").parents("tr"), function () {
selectedRows.push({
company: $(this).find('td:eq(1)').text(),
contact: modifier
});
});
console.log(selectedRows);
}
(adding selected rows initialization inside function) you'll get what you want: a new calculation each time. If what you want is update elements on each click of the button, well then you need different methods
I'm not sure why this jquery is not working. What I want is pretty straightforward: selecting all check boxes under the region. Could someone help tell why it's not working?
$(function(){
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).next('tbody').find('.region_ct');
if(checkthis.is(':checked')) {
checkboxes.attr('checked', true);
} else {
checkboxes.attr('checked', false); }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
...
</table>
There are a couple of issues there:
I would strongly recommend against intermixing tr and tbody elements. If you're going to use tbody (and you should), use it consistently. Browsers may relocate tr elements into generated tbody elements.
The element you're calling next on doesn't have a following sibling (at all, much less the one you're looking for). You have to traverse up the hierarchy to the tr (if you don't fix #1) or the tbody (if you do).
You don't use attr to set checked, you use prop; and you can use your existing checked boolean rather than if/else, giving is simply checkboxes.prop("checked", this.checked);
Example with updated tbodys, and I've added some countries in the Asia area to demonstrate that only the relevant checkboxes are checked:
$(function() {
$('.select_all').change(function() {
var checkthis = $(this);
var checkboxes = $(this).closest('tbody').next().find('.region_ct');
checkboxes.prop("checked", this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
<tr>
<td colspan=2>
<input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />China</td>
<td class="center"></td>
</tr>
<tr>
<td>
<input type="checkbox" class="region_ct" value="X" />Vietnam</td>
<td class="center"></td>
</tr>
</tbody>
</table>
You might also consider putting the select_all inside the same tbody with the checkboxes, so you could do away with next.
tbody isn't sibing of .select_all. You need to use .closest() to select parent of .select_all and use .find() to select .region_ct in it. Also you don't need to use if/else to check/uncheck checkbox. Only set this.checked to checked attribute of checkbox using .prop().
$('.select_all').change(function() {
$(this).closest('table').find('.region_ct').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tr>
<th colspan=2>Americas</th>
</tr>
<tr>
<td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
</tr>
<tbody>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Argentina</td>
<td class="center"></td>
</tr>
<tr>
<td><input type="checkbox" class="region_ct" value="X" /> Barbados</td>
<td class="center"></td>
</tr>
</tbody>
<tr>
<th colspan=2>Asia</th>
</tr>
</table>
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