I have a table with Datatable plugin, and I did the part when the user clicks on the row (tr) that he will be redirected to that link. but i don't want the user to be redirected to the link when he clicks the checkbox on the row.
Here is the html:
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
Here is my javascript code for redirecting the user to the link when it's clicked:
$('#sample_1').on( 'click', 'tr', function() {
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
} );
So i don't want to redirect the user when the checkbox is clicked, pls help :)
Thank you
You can use e.target to check what element the user clicked on. In the example below, we check if the user clicked on an input of type checkbox. Then we don't run the rest of the function.
$('table').on( 'click', 'tr', function(e) {
var target = $(e.target);
debugger; // For debugging purposes.
if (target.is('input[type=checkbox]')) {
// Do not continue if it's an input
console.log('no redirect');
return true;
}
console.log('do redirect');
var $a = $(this).find('a').last();
if ( $a.length )
window.location = $a.attr('href');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class=""> ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class=""> 22 Candidates</td>
<td class="">01 Apr 2016</td>
<td></td>
</tr>
</table>
Update:
In this particular case the checkbox had some custom styling, which led to e.target being a span. The solution is to change the condition to $(e.target).is('span'), or even better set a class on the span and use $(e.target).hasClass('my-custom-checkbox').
Here you go - Add this to cancel the event when the checkbox is clicked:
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
Here is a working Demo
$('table').on('click', 'tr', function() {
var $a = $(this).find('a').last();
if ($a.length)
alert("fsfsd");
});
$("tr input:checkbox").click(function(event) {
event.stopPropagation();
// Do something
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="odd gradeX">
<td class="number_elem_lang">
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox'>
<span></span>
</label>
</td>
<td class="">ID022ox</td>
<td class="list-name">First Lipsum List</td>
<td class="">22 Candidates</td>
<td class="">01 Apr 2016</td>
<td>
</td>
</tr>
</table>
Use the if construction
if ($('input.checkbox_check').is(':checked')) {
...
}
Add a class named yourradio in your radio button and add this javascript
<label class='with-square-checkbox2-mylist-details'>
<input type='checkbox' class="yourradio">
<span></span>
</label>
<script>
$('.yourradio').on('click', function(){
return false;
});
Related
I have sample code as follows :
<table id='emailTable'>
<tr id='tablecontent'>
<td>
</td>
<td>
<a ....>delete</a>
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
<a ....>delete</a>
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
</td>
</tr>
<table>
Here, I want to delete the row onclick of delete link with the next row.
Have tried with 'parentNode' and removechild with currentNode but nothing happens.
you can attach an event listener to a for click event and use $(this).parents('tr') inside event handler to access parent row. something like this:
$('a').on('click', function(e){
e.preventDefault();
$(this).parents('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='emailTable'>
<tr id='tablecontent'>
<td>
</td>
<td>
delete
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
delete
</td>
</tr>
<tr id='tablecontent'>
<td>
</td>
<td>
</td>
</tr>
<table>
Here you go table row removal using JavaScript:
// get all rows
var rows = document
.querySelectorAll("#emailTable tr#tablecontent");
// create a find parent function
// since JavaScript do not have $(elem).parent("tr")
// which automatically search a parent or parent of parents that is a <tr>
var findParent = function (node, tagName)
{
var recursiveSearch = function(node, tagName)
{
// you can change the condition as you see fit.
return node.parentNode.tagName.toLowerCase() == tagName.toLowerCase() ? node.parentNode : recursiveSearch(node.parentNode, tagName);
};
// do a recursive search based from passed node if it matches with a given tag name.
return recursiveSearch(node, tagName);
};
// loop through each row
rows.forEach(function (item)
{
// find the delete element
var deleteElem = item.querySelector("td a.delete");
// if there is an delete element
if (deleteElem)
{
// add event listener
deleteElem.addEventListener("click", function ()
{
// find parent element that is a <tr>
var row = findParent(this, "tr");
// remove the row
row.remove();
});
}
});
working fiddle
hope that helps
I want to use casperJS to automatically select a checkbox
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205></td>
</tr>
The first column is the checkbox to select.
The second one is the name of the subject and the last one is the ID of the subject.
Now I just know the ID of the subject: INT2204 and I want to use casperjs to select the box of this subject. However, the only thing to distinguish is data-crdid which I have no clue.
Are there anyway to select the checkbox of the subject with ID 'INT2204' by casperjs?
You can use jQuery to filter on the element and get the siblings. This can be evaluated inside the page by CasperJS if you inject jQuery (if it isn't already).
Inject jQuery:
casper = require('casper').create();
casper.start();
casper.open('some url');
casper.then(function doSomething() {
this.page.injectJs('relative/local/path/to/jquery.js');
this.evaluate(function (courseId) {
$('td').filter(function() {
return $(this).text() === courseId;
}).siblings().find('input').prop('checked', true);
}, 'INT2203>');
});
Example in Browser:
var courseId = 'INT2203>';
$('td').filter(function() {
return $(this).text() === courseId;
}).siblings().find('input').prop('checked', true);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Checkbox test</title>
</head>
<body>
<table>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204></td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205></td>
</tr>
</table>
</body>
</html>
I finally found a way to solve my problem without using jQuery.
Here is the HTML code which I copied from #Evers answer:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Checkbox test</title>
</head>
<body>
<table>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
</td>
<td>Data Structures and Algorithms</td>
<td>INT2203</td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
</td>
<td>Machine Learning</td>
<td>INT2204</td>
</tr>
<tr>
<td style=" text-align:center;">
<input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
</td>
<td>Artificial Intelligence</td>
<td>INT2205</td>
</tr>
</table>
</body>
</html>
I will use method getElementsInfo and getElementsAttribute of CasperJS:
First, I need to collect all the data which related to the subjects. Since the only things I know is the ID and the name of the subjects, I need to know their data-crdid in order to select the checkbox.
casper.then(function () {
// Select all the subject IDs in the table
id = this.getElementsInfo('table tr td:nth-child(3)')
.map(function (value, index, array) {
return array[index].text();
});
// Select all the data-crdid in the table
data = this.getElementsInfo('table tr td input', 'data-crdid');
});
After that, everything is simple. I just need to pick my subject by its ID and the data-crdid will have the same index in array data.
casper.then(function () {
selected = data[id.indexOf(subject)];
});
casper.thenEvaluate(function (selected) {
document.querySelector('input[data-crdid="' + selected + '"]').click();
}, selected);
Here is the full code:
var casper = require('casper').create();
var subject = 'INT2204';
casper.start();
casper.thenOpen('/{{ URL }}');
casper.then(function () {
// Select all the subject IDs in the table
var id = this.getElementsInfo('table tr td:nth-child(3)')
.map(function (value, index, array) {
return array[index].text();
});
// Select all the data-crdid in the table
var data = this.getElementsInfo('table tr td input', 'data-crdid');
var selected = data[id.indexOf(subject)];
this.thenEvaluate(function (selected) {
document.querySelector('input[data-crdid="' + selected + '"]').click();
}, selected);
});
casper.run();
I'm trying to remove the current row (tr element) where checkbox is checked. I'm working on this code:
$('#btnEliminar').on('click', function () {
var $my_checkbox = $('#toggleCheckbox');
var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
$all_checkboxes.each(function () {
if ($(this).prop('checked')) {
// here should remove the current tr
return false;
}
});
});
But I don't know how to follow from here, I'm stucked since don't know how to remove the marked rows. Take in account that #toggleCheckbox will toggle all but also can be selected one by one. Can I get some help?
This is the HTML code:
<table id="tablaNorma" class="table">
<thead>
<tr>
<th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
<th>Nro.</th>
<th>Norma</th>
<th>Año</th>
<th>Comité</th>
</tr>
</thead>
<tbody id="normaBody">
<tr class="">
<td>
<input type="checkbox" value="1">
</td>
<td>814002983</td>
<td>Harum.</td>
<td>1979</td>
<td>Non asperiores.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="2">
</td>
<td>90234555</td>
<td>Ea in sequi.</td>
<td>1994</td>
<td>Ad modi ea in.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="3">
</td>
<td>29</td>
<td>Eos tempore.</td>
<td>1970</td>
<td>Eaque error.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="4">
</td>
<td>93</td>
<td>Earum ut.</td>
<td>2014</td>
<td>Earum ut.</td>
</tr>
</tbody>
</table>
Simply like this :
$('#btnEliminar').on('click', function () {
$("#tablaNorma input[type='checkbox']:checked").closest("tr").remove();
});
Edit :
Exept header.
$('#btnEliminar').on('click', function () {
$("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
});
Edit :
As you need.
$('#btnEliminar').on('click', function () {
$("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
if($("#tablaNorma tbody tr").length == 0)
{
// do something, like hide table
$("#tablaNorma").hide();
}
});
Edit :
Pass a selector to a function. Do exact the same thing but we are passing the selector as parameter.
$('#btnEliminar').on('click', function () {
DoSomething("#tablaNorma");
});
function DoSomething(selector)
{
$(selector + " input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
}
you have to do it something like this:
$(function () {
$("#delete").click(function () {
$("#tablaNorma tbody tr").each(function () {
if ($(this).find("input:checkbox:checked").length > 0) $(this).remove();
})
})
$(".toggleCheckbox").change(function(){
$("#tablaNorma tbody tr").find("input:checkbox").prop("checked",this.checked);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tablaNorma" class="table">
<thead>
<tr>
<th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
<th>Nro.</th>
<th>Norma</th>
<th>Año</th>
<th>Comité</th>
</tr>
</thead>
<tbody id="normaBody">
<tr class="">
<td>
<input type="checkbox" value="1">
</td>
<td>814002983</td>
<td>Harum.</td>
<td>1979</td>
<td>Non asperiores.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="2">
</td>
<td>90234555</td>
<td>Ea in sequi.</td>
<td>1994</td>
<td>Ad modi ea in.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="3">
</td>
<td>29</td>
<td>Eos tempore.</td>
<td>1970</td>
<td>Eaque error.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="4">
</td>
<td>93</td>
<td>Earum ut.</td>
<td>2014</td>
<td>Earum ut.</td>
</tr>
</tbody>
</table>
<input type="button" id="delete"/>
Since you are using jQuery, you can use the .remove method:
$('#btnEliminar').on('click', function () {
// use the table's id to find checkboxes in tbody
var $all_checkboxes = $('#tablaNorma>tbody').find('input[type=checkbox]');
$all_checkboxes.each(function () {
if ($(this).prop('checked')) {
// find the tr and remove
$(this).closest('tr').remove();
return false;
}
});
});
While you've already accepted an answer, I'd personally suggest the following approach (to tie the implicit systems together):
// binding a change event-handler to the toggleCheckbox:
$('#toggleCheckbox').on('change', function () {
var toggle = this;
// find the closest table:
$(this).closest('table')
// find the checkboxes within the tbody:
.find('tbody input[type="checkbox"]')
// set the 'checked' property of those checkboxes according
// to the checked state of the toggleCheckbox:
.prop('checked', toggle.checked);
});
// binding the change event-handler to the tbody:
$('tbody').on('change', function () {
// getting all the checkboxes within the tbody:
var all = $('tbody input[type="checkbox"]'),
// getting only the checked checkboxes from that collection:
checked = all.filter(':checked');
// setting the checked property of toggleCheckbox to true, or false
// according to whether the number of checkboxes is greater than 0;
// if it is, we use the assessment to determine true/false,
// otherwise we set it to false (if there are no checkboxes):
$('#toggleCheckbox').prop('checked', all.length > 0 ? all.length === checked.length : false);
});
// binding the click event-handler:
$('#btnEliminar').on('click', function () {
// finding the checked checkboxes in the tbody:
$('#tablaNorma tbody input[type="checkbox"]:checked')
// finding the closest tr elements:
.closest('tr')
// removing them:
.remove();
// triggering the 'change' event on the tbody (to call the change
// event-handler to set the toggleCheckbox appropriately):
$('#tablaNorma tbody').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEliminar">Remove rows</button>
<table id="tablaNorma" class="table">
<thead>
<tr>
<th>
<input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox">
</th>
<th>Nro.</th>
<th>Norma</th>
<th>Año</th>
<th>Comité</th>
</tr>
</thead>
<tbody id="normaBody">
<tr class="">
<td>
<input type="checkbox" value="1">
</td>
<td>814002983</td>
<td>Harum.</td>
<td>1979</td>
<td>Non asperiores.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="2">
</td>
<td>90234555</td>
<td>Ea in sequi.</td>
<td>1994</td>
<td>Ad modi ea in.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="3">
</td>
<td>29</td>
<td>Eos tempore.</td>
<td>1970</td>
<td>Eaque error.</td>
</tr>
<tr class="">
<td>
<input type="checkbox" value="4">
</td>
<td>93</td>
<td>Earum ut.</td>
<td>2014</td>
<td>Earum ut.</td>
</tr>
</tbody>
</table>
References:
closest().
filter().
find().
on().
prop().
remove().
I am trying to disable checkboxes that have different warehouse locations once a warehouse is selected. For example, if I check California I want to disable all the checkboxes that are from other states. I am trying to do it based on the attribute whseID but I can't figure out how to have jquery make that distinction between that attribute. Sometimes I will ship multiple items from 1 warehouse. So when I check 1 checkbox in California I need the other one in California to remain enabled but I need Washington and Arizona disabled.
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr class="grdnt">
<th style="color:black;">Checkbox</th>
<th style="color:black;border-left:1px solid;">Warehouse</th>
<th style="color:black;border-left:1px solid;">Item</th>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29458</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="CA" />
</td>
<td class="Whse">California</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="WA" />
</td>
<td class="Whse">Washington</td>
<td class="Item">J29478</td>
</tr>
<tr id="transferDetailCol">
<td>
<input type="checkbox" class="tfrCheck" name="tfrCheck[]" whseID="AZ" />
</td>
<td class="Whse">Arizona</td>
<td class="Item">J29478</td>
</tr>
</table>
$(document).on('click', '.tfrCheck', function () {
var allCheckBox = $(".tfrCheck");
var count_checked = allCheckBox.filter(":checked").length;
var whseID = $(this).attr('whseID');
if (count_checked >= 1) {
$(".tfrCheck:contains(whseID)").attr('disabled', 'disabled');
//$(".tfrCheck:not(:checked)").attr('disabled','disabled');
} else {
$(".tfrCheck").removeAttr('disabled');
}
});
JSFIDDLE
Ragnar's answer is close, but since you want OTHER states to be disabled, use
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');
Try using this line:
$('.tfrCheck:not([whseID='+ whseID +'])').attr('disabled', 'disabled');
The "attribute not equal selector" should help:
allCheckBox.filter('[whseID!="' + whseID + '"]').attr('disabled', true);
http://jsfiddle.net/oxkeL7jm/4/
I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.
There's a nice plugin for this
Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});
Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});