Develop Reference

How to prevent click handler for a specific target

I am using these to make clickable link row but I don't want to include the checkbox because I am using checkbox to filter another action.
Is it possible to except checkbox on the row?
How to prevent click handler for a specific target
jQuery(document).ready(function($) {
$(".clickable-row").click(function() {
window.document.location = $(this).data("href");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered table-hover table_adj table-checkable txt-col mar_bot_10">
<thead>
<tr>
<th>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input class="mail-group-checkbox" type="checkbox" value="movetofilter"> <span></span>
</label>
</th>
<th>a</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Added Reference">b</span>
</th>
<th>c</th>
<th>d</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Received Message">e</span>
</th>
<th><span data-placement="bottom" data-toggle="tooltip" title="Received Date">f</span>
</th>
<th>g</th>
<th>h</th>
<th class="text-right">i</th>
</tr>
</thead>
<tbody>
<tr class='clickable-row' data-href='http://stackoverflow.com'>
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
<input class="mail-group-checkbox" type="checkbox" value="movetofilter"> <span></span>
</label>
</td>
<td>1
</td>
<td class="text70px">1</td>
<td class="text170px">1</td>
<td>212</td>
<td class="text40px">23</td>
<td class="text70px">2</td>
<td class="text40px">4</td>
<td class="text70px">5</td>
<td class="text70px text-right">6</td>
</tr>

You can verify what element was clicked using event.target.
$(".clickable-row").click(function(event) {
// Check if target is NOT inside '.mt-checkbox'
if(!$(event.target).closest('.mt-checkbox').length){
window.document.location = $(this).data("href");
}
});

Select or deselect the checkbox

I have an HTML as follow :
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>
I have a select all checkbox with id checkAll What I want is that when I click on this checkbox then it should select/deselect all the remaining check box in table
I have used the code :
<script type="text/javascript">
jQuery(document).ready(function (){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
But when I click on selectAll checkbox then it does not select the checkboxes. Please help me what is missing in it ?

If you get jQuery(...).prop not a function error, it means you are using an old version of jQuery (< 1.6). Very old, it is recommended to update the jQuery. Use this code then:
<script type="text/javascript">
jQuery(document).ready(function (){
jQuery("#checkAll").change(function () {
if (this.checked)
jQuery("input:checkbox").attr('checked', "checked");
else
jQuery("input:checkbox").removeAttr('checked');
});
});
</script>

You can use bellow code. I tested it's working fine.
$(document).ready(function(){
$("#checkAll").change(function () {
$("input:checkbox").attr('checked', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<table class="responsive display table table-bordered">
<tbody>
<tr>
<th>Sr No</th>
<th>Student Code</th>
<th>Student Name</th>
<th>Date Of Birth</th>
<th>Action</th>
<th>Select <a data-placement="left" rel="tooltip" title="Select All"><input id="checkAll" name="deleteselect[]" value="0" type="checkbox"></a></th>
</tr>
<form action="" method="post"></form>
<tr>
<td>1</td>
<td>1001</td>
<td>Rohit Singhal </td>
<td>17-4-1988</td>
<td>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=update&id=2" rel="tooltip" title="update" class="update">
<i class="icon-pencil"></i>
</a>
<a href="http://localhost/wordpress/wp-admin/admin.php?page=eMarksheet-student-list&action=delete&id=2" onclick="return show_confirm();" rel="tooltip" title="Delete" class="delete">
<i class="icon-trash"></i>
</a>
</td>
<td>
<input name="deleteselect[]" value="2" type="checkbox">
</td>
</tr>
<tr>
<td>2</td>
<td>1003</td>
<td>Lisa Kurdow </td>
<td>24-7-1965</td>
<td> <i class="icon-pencil"></i> <i class="icon-trash"></i></td><td><input name="deleteselect[]" value="6" type="checkbox"></td></tr>
</tbody></table>

Delete selected rows from HTML Tables

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>

use button to pass td data

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.

Enable/Disable textboxes using checkbox inside the table

Help me. I have problem with the code:
I have this script:
<script>
$('td input[type="checkbox"]').onclick(function () {
$(this).closest('tr').find('input[type="text"]').prop('disable', !this.checked);
}).change();
</script>
And the table:
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th></th>
<th>#</th>
<th>Activity Name</th>
<th>SkillsID</th>
<th>Percentage</th>
<th><center>Time Estimate Overhead (min)</center> </th>
<th><center>Time Estimate Per Unit (min)</center></th>
<th><center>Total Time (min)</center></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="others1">
<td>1</td>
<td>Preparation</td>
<td class="center">1,7,8</td>
<td class="center"></td>
<td class="center"><input type="text" id="cb1_teo_text" name="cb1_teo_text" style="width: 100%;" disabled=""></td>
<td class="center"><input type="text" id="cb1_tep_text" name="cb1_tep_text" style="width: 100%;" disabled=""></td>
<td class="center"><span id="totaTime1"/></td>
</tr>
<tr>
<td><input type="checkbox" name="others2"></td>
<td>2</td>
<td>Review of Materials</td>
<td class="center">1,7,8</td>
<td class="center"></td>
<td class="center"><input type="text" name="cb2_teo_text" style="width: 100%;" disabled=""></td>
<td class="center"><input type="text" name="cb2_tep_text" style="width: 100%;" disabled=""></td>
<td class="center"></td>
</tr>
</tbody>
</table>
I just want to enable the preceding with two when the checkbox is checked and disable when the checkbox is unchecked.

There is no .onclick() event binding in jQuery - it is .click(), also the property name to enable and disable elements is disabled not disable. You also need to wrap the binding in a $(document).ready() block so the Javascript isn't trying to bind the event to an element that doesn't exist yet.
These changes to your code are all that are needed to make it work.
$(document).ready()
{
$('td input[type="checkbox"]').click(function () {
$(this).closest('tr').find('input[type="text"]').prop('disabled', !this.checked);
}).change();
});
Here is a working jsFiddle showing the changes.