How to disable click on a table cell when the cell is empty or has value as zero.
I have a table in which when i click on a particular cell certain operations are performed. But I want the click event not to work when the table has cell value 0 or empty cell
$('#tablename').off('click','td').on('click', 'td', function(e) {
var column = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
var row = this.parentNode.cells[1];
if ($(row).text().trim() == "")
{
row = this.parentNode.cells[0];
}
var rowvalue = $(row).text();
var columnvalue = $(column).text();
}
$('td').click(function(){
var v = $(this).html();
if( $.trim(v) != '0' && v != '' ){
// your code
}
});
hope this helps you.
Try mapping all dom elements with zero or empty string values, then disable their default clicking functions:
var duds = $('td').map(function () {
if ($(this).html() == 0 || $(this).html() == "") {
return $(this);
}
});
duds.onclick(function (event) {
event.preventDefault();
});
This is an example, modify it according to your code:
HTML:
<table>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
<tr>
<td>Content <input type="text" class="hidden"></td>
<td>Content <input type="text" class="hidden"></td>
</tr>
</table>
CSS:
.visible {
display: block;
}
.hidden {
display: none;
}
JS:
var tds = $('td');
tds.click(function(){
var thisTable = $(this).html();
if( thisTable == '0' || thisTable == '' ){
var allInputs = tds.find('input');
allInputs.removeClass('visible');
allInputs.addClass('hidden');
}
});
I wont prefer to give you the whole solution but the just a hint. You should use following line of code
<td onclick="return false;">Content</td>
This is inline event handling - you can always use jquery to avoid inline event handling - this would also be a good homework for you.
you can use this css property
pointer-events: none;
and you can refer more in this link:
Related
How to get previous td child attribute value using jquery? I am getting undefined while using my code, can you suggest or find whats wrong in my code.
This is my code, I am trying to get the attribute of previous td child from current td input, kindly see the below and suggest me the solution.
HTML
<html>
<head><title>I am a beginner</title></head>
<body>
<table><thead/><tbody>
<td><input name="1sttextbox" type="text" value="10/22/2015" id="1"/></td>
<td><input name="2ndtextbox" type="text" value="10/23/2015" id="2"/></td>
<td><input name="3rdtextbox" type="text" value="10/21/2015" id="3"/></td>
</tr></tbody>
</table>
</body>
</html>
Jquery
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
var val2 = $(this).closest('td').prev('td input').attr('value');
alert(val1);
alert(val2);
return false;
});
You can use find with result returned by prev, instead of using descendant selector syntax in prev. Your code alose does not have closing }) for blur handler.
var val2 = $(this).closest('td').prev('td').find('input').attr('value');
As you are binding element to all inputs, the first input wont have prev input so you need to take care of that as well.
Live Demo
To check if you get the prev element you can use type of to identify if you get undefined.
console.log(typeof val2 == 'undefined' ? 'no previous element' : val2);
Created this fiddle
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
var val2 = $(this).closest('td').prev().find("input").attr('value');
alert(val1);
alert(val2);
return false;
}) });
Edited the fiddle to check if the input is first td so that undefined is not displayed
$(function() {
var input=$("input[type='text']");
input.blur(function() {
var val1=$(this).val();
alert(val1);
if ( $(this).closest('td').index() > 0 )
{
var val2 = $(this).closest('td').prev().find("input").val();
alert(val2);
}
return false;
}) });
You can get previous input value like:
var val2 = $(this).parent('td').prev('td').children('input').val();
Working Fiddle
Try either adding closing </thead> or removing <thead> , including }) at close of $(function() {}) ; using $("> input", this.parentElement.previousElementSibling) to select previous input element . Note , if input is at index 0 would return undefined ; included check for previous input being undefined , in which instance , alert #1 id
$(function() {
var input = $("input[type='text']");
input.blur(function() {
var val1 = $(this).val();
var val2 = $("> input", this.parentElement.previousElementSibling);
alert(val1);
alert(val2.length && val2.val() || this.id);
return false;
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>I am a beginner</title>
</head>
<body>
<table>
<tbody>
<td>
<input name="1sttextbox" type="text" value="10/22/2015" id="1" />
</td>
<td>
<input name="2ndtextbox" type="text" value="10/23/2015" id="2" />
</td>
<td>
<input name="3rdtextbox" type="text" value="10/21/2015" id="3" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
imagine i have 3 rows in a table, there is 3 input fields in every row. when i type something in the last input field it should add new row following that last row also when i hit backspace and all fields in latest row is empty then the new added row should be remove
i have no idea how to prevent another addition if the new row already appended to the table. this is what i've done so far.
$(document).ready(function(){
$("input[name=class_name\\[\\]]:last-child").keyup(function addNewRow(e){
var parent = $(this).closest('tr');
var tr = parent.clone();
if(e.keyCode != 8){
$("#classes tr:last-child").remove();
}else{
$("#classes").append(tr);
}
});
});
how about a check by selecting the last element again, and compare it to this? If it's not the same, then a row has already been added
Do you mean like this:
<table id="classes">
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
<tr>
<td><input onchange="process()"/></td><td><input onchange="process()"/></td><td><input onchange="process()"/></td>
</tr>
</table>
Javascript:
function process(){
var parent = $("#classes tr:last-child").closest('tr');
var tr = parent.clone();
if($("#classes tr:last-child td:last-child input").val() !== '')
{
$("#classes").append(tr);
}
else if($("#classes tr:last-child td").eq(0).find("input").val() === '' && $("#classes tr:last-child td").eq(1).find("input").val() === '' && $("#classes tr:last-child td").eq(2).find("input").val() === '')
{
$("#classes tr:last-child").remove();
}
}
here is my sample code
<table id="accessListTable">
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
</tr>
</table>
E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.
Please any help!
You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead
$(function ($) {
$(".groupHeadCheck").on("click", function (event) {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
})
});
Demo: Fiddle
I am sure it can be done in a prettier manner, but this is the basic idea:
$("table tbody").on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
allCbs.prop('checked', isChecked);
} else {
var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
var allSlaves = allCbs.not(".groupHeadCheck");
var master = allCbs.filter(".groupHeadCheck");
var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
master.prop("checked", allChecked);
}
});
and if you need to run the code to force the check all state
$(".groupHead").next().find("[type=checkbox]").change();
JSFiddle
This would check all if the first is checked (or uncheck all)
$(document).on('click', '.groupHeadCheck',function() {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});
you could fiddle a bit with your classes (or IDs) to make it right for you
I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.
You could use the class name to apply the same logic.
First, here is what a check all checkbox looked like:
<td>
<input type="checkbox" onchange="checkAll(this, 'S_');" />
</td>
Then the javascript function it calls when clicked:
function checkAll(sender, match)
{
var table = $(sender).closest('table').get(0);
var selector = "input[type='checkbox'][name^='" + match + "']";
for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
{
var cb = $(table.rows[i]).find(selector).get(0);
if (cb === undefined)
break;
if ($(cb).is(':enabled'))
cb.checked = sender.checked;
}
}
So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.
so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
How would you grab all the id numbers from the tbody rows from the Select all checkbox?
jQuery
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
HTML
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>
You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});
Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/
You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
jsFiddle
Use find instead of children and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/
I know this doesn't quite answer the question using children, but you can use $('#tbody').find('input') to find all the input fields within an element.
my TD's are generated by grid object on a fly
i'm trying to change value of the fist empty input that is positioned inside :
$("#get_isrc").click(function(){
$.ajax({
url: 'xtras/isrc.php',
success: function(data){
$("#new_isrc").val(data);
$("#get_isrc").val('Apply');
$("#get_isrc").addClass('apply');
}
}).error(function(){
alert('Error');
});
});
$(".apply").live("click", function(){
var s = $("td[col=ISRC] input").val();
if (s === "") {
$(this).val(($("#new_isrc").val()));
}
});
html - static:
<h3>Generate next ISRC</h3>
<input id="new_isrc" type="text" />
<input id="get_isrc" type="button" value="Get next ISRC" />
html generated by jquery:
<tr id="4"><td><input class="editableInput" type="text" /></td><td col="ISRC" class="editableCell"><input class="editableInput " type="text"></td></tr>
<tr id="1"><td><input class="editableInput" type="text" /></td><td col="ISRC" class="editableCell"><input class="editableInput " type="text"></td></tr>
<tr id="2"><td><input class="editableInput" type="text" /></td><td col="ISRC" class="editableCell"><input class="editableInput " type="text"></td></tr>
<tr id="3"><td><input class="editableInput" type="text" /></td><td col="ISRC" class="editableCell"><input class="editableInput " type="text"></td></tr>
tr's 1 and 2 have ISRC values from database, tr 3 is empty, but positioned last
tr 4 - is newly added empty line and i want a generated isrc applied to it...
code i provided above doesn't work. why?
You are calling .val() into an array of inputs, do this:
$("td[col=ISRC] input").each(function() {
// each iteration function
var s = $(this).val();
if (s === "") {
$(this).val(($("#new_isrc").val()));
return false; // stops each iteration
}
});
Edit:
If you want to add the same value to all inputs, do this:
$("td[col=ISRC] input").each(function() {
var s = $(this).val();
if (s === "") {
$(this).val(($("#new_isrc").val()));
}
});
If you want to add dynamic values to all inputs, do this:
$("td[col=ISRC] input").each(function() {
var s = $(this).val();
if (s === "") {
$(this).val(getNextValue());
}
});
function getNextValue() {
// your business implementation here
}