I am trying to delete selected rows (via checkbox) but I don't understand where I am going wrong
this is my code
JQuery
$("#delete").click(function(){
$("table input[type ='checkbox']:checked").parent().parent().remove();
});
HTML
<div class = "patientData">
<div class ="searchBar">
<input type = "search" name = "search" class = "search">
<i class ="fa fa-search"></i>
<button id = "delete">Delete Selected</button>
</div>
<table style ="width:95%" class = "Info">
<tr>
<th><input type="checkbox" id="select"> </th>
<th> Name</th>
<th>Number</th>
<th>Date</th>
</tr>
</table>
</div>
The user enters the rows which is why my table by default only has headings. I have stuck on this for a while now and no research is helping me solving the problem.
Please help if anyone can, Thanks in advance.
You should use the :has selector to get all rows containing a checked box, rather than working your way back up to the parent. This will keep the selector at the row-level, preventing DOM changes from accidentally working up too many parents and deleting large chunks of the page.
Something like:
$("#delete-button").on("click", function(e) {
$("#delete-table tr:has(td > input[type=checkbox]:checked)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="delete-button">Delete!</button>
<table id="delete-table">
<tr>
<th>
<input type="checkbox" />
</th>
<th>Header</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 1</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 2</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Row 3</td>
</tr>
</table>
Related
i want when user click delete icon i need value of hidden input inside "delete" class but i am getting undefined can someone guide me where i am doing wrong
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete"></i></td>
</tr>
</table>
my jquery code is as follow
$(document).on('click', '.shopping-cart .delete', function(){
var $target = $(this).parent().find('.row_id').val();
alert($target);
});
every time i run to alert i get error " undefined.tried many different ways but didnt work
You don't have a class on the input, just a name, change your markup like this:
<input type="hidden" name="row_id" class="row_id" value="123">
or your selector like this:
var $target = $(this).parent().find('input[name="row_id"]').val();
$(document).on('click', '.delete', function(){
var $target = $(this).find('input').val();
alert($target);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="items-list">
<tr>
<th> </th>
<th>Product name</th>
<th>Product price</th>
<th>Quantity</th>
<th>Total</th>
<th>action</th>
</tr>
<!--Item-->
<tr class="item">
<td class="thumb"><img src="img/catalog/shopping-cart-thumb_2.jpg" alt="Lorem ipsum"/></td>
<td class="name">Wristlet</td>
<td class="price">715,00 $</td>
<td class="qnt-count">
<a class="incr-btn" href="#">-</a>
<input class="quantity form-control" type="text" value="2">
<a class="incr-btn" href="#">+</a>
</td>
<td class="total">2715,00 $</td>
<td class="delete"> <input type="hidden" name="row_id" value="123" > <i class="icon-delete">Delete</i></td>
</tr>
</table>
Please check the Working Code.
I have firstly added a new <TH> Tag to display the delete button.
And then in jquery i user .find to get the internal element of <TD> and as per your code it alters the value of hidden box
Thanks wish it might help you
Empty Text is not showing In table
I am using table
which is empty Now
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Privilege Name</th>
<th>PageUrl</th>
<th>Can Add</th>
<th>Can Edit</th>
<th>Can Delete</th>
<th>Can View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in getAssignedPrivilegeslist" ng-show="getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'">
<td>{{$index+1}}</td>
<td>{{obj.PageName}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.PageUrl}}</a></td>
<td>
<input type="checkbox" name="Add" value="Add" ng-model="obj.CanCreate" />
</td>
<td>
<input type="checkbox" name="Edit" value="Edit" ng-model="obj.CanEdit" />
</td>
<td>
<input type="checkbox" name="Delete" value="Delete" ng-model="obj.CanDelete" />
</td>
<td>
<input type="checkbox" name="View" value="View" ng-model="obj.CanView" />
</td>
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">Please Select Operator</td>
</tr>
</tbody>
</table>
Then I set a <td> if data length is 0 then show the given message but it is not showing.
Please help I will be very thankful to you all.
These three changes you have to made in your code :
Instead of ng-show="getAssignedPrivilegeslist.length !=0" you can use ng-show="getAssignedPrivilegeslist.length". As suggested by Harris Weinstein in his comment that if the list's length is any number besides 0, it'll evaluate as true, and if it's 0 or can't be accessed (because it's undefined), it'll evaluate as false.
Instead of using string literal getAssignedPrivilegeslist !='null' use getAssignedPrivilegeslist !=null.
Put your element having error message outside the <tr> as you already put the ng-show="getAssignedPrivilegeslist.length !=0" in the <tr> tag.
You can use like this outside your <tr> tag as suggested by sexta13:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
You have your logic not very well structured.
You have your
<td ng-show="getAssignedPrivilegeslist.length==0" id="nofoundop">
Please Select Operator
</td>
inside a ng-repeat that will only happen if getAssignedPrivilegeslist.length !=0 && getAssignedPrivilegeslist !='null'
You should have another tr outside the ng-repeat with something like this:
<tr ng-show="getAssignedPrivilegeslist.length==0" >
<td id="nofoundop">
please select operator
</td>
</tr>
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 have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
Sort of an odd question, but I'm having some trouble coming up with a good selector to do this. The jsfiddle is here: http://jsfiddle.net/NZf6r/1/
In short, I have a parent table which has a "select all" checkbox as a column in the thead. Every table row also has a checkbox. The intention is if they click the checkbox, I select (or deselect) all of the row checkboxes in the tbody. Simple, right?
However, there a rows in the table that function as child tables for each row. These child tables also have checkboxes and also have a need for the same "select all" scheme.
The tricky part is not getting the "select all" in the parent table to also select the children. My current event function looks like this (also on the jsfiddle):
$('th input').on('click', function(event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.parents('table')
.first()
.find('input[type="checkbox"]')
.each(function(i, checkbox) {
$(checkbox).prop('checked', isChecked);
});
});
I know I can use direct child selectors (>), but I'm not quite sure of the best way to incorporate that.
I also know I could add a class to the checkboxes for each table type (parent vs. child) and add that to the input selector, but I'm curious if there's a way I can avoid doing that. Some jQuery magic, if you will.
Here is the rough HTML of things (not the full table, obviously) in case you can't access the jsfiddle:
<table>
<thead>
<tr>
<th style="width:20px">
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Aaaaa</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
<tr>
<td colspan="2">
<div style="padding-left: 20px">
<table>
<thead>
<tr>
<th>
<div>
<input type="checkbox" />
</div>
</th>
<th>Bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<input type="checkbox" />
</div>
</td>
<td>Bbbbb</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Use this script instead:
$('th input').on('click', function(event){
var parenttable = $(this).parents('table:first');
var isChecked = $(event.target).is(':checked');
parenttable.find(">tbody>tr>td>div>input").prop('checked', isChecked);
});
try this demo
$('th input').on('click', function (event) {
var isChecked = $(event.target).is(':checked');
$(event.target)
.closest("table")
.find('> tbody > tr:not(:has(table)) > td input[type="checkbox"]')
.each(function () {
$(this).prop('checked', isChecked);
});
});