Disable click event on HTML table cell
$('td').click(function(){
var v = $(this).html();
if( $.trim(v) != '0' && v != '' ){
// your code
}
});
hope this helps you.
Disable click on a table td but activate click on div a the table
$('.right input[type="text"]').on('focus', function() { $('.left input[type="text"],.left button').attr('disabled', 'disabled'); $('.left').addClass('distd');})
$('.right input[type="text"]').on('blur', function() { $('.left input[type="text"],.left button').prop('disabled', false); $('.left').removeClass('distd');})
$('.left input[type="text"]').on('focus', function() { $('.right input[type="text"],.right button').attr('disabled', 'disabled'); $('.right').addClass('distd');})
$('.left input[type="text"]').on('blur', function() { $('.right input[type="text"],.right button').prop('disabled', false); $('.right').removeClass('distd');})table,td { border: 1px solid black}
td { margin: 5px; padding: 5px;}
.distd { background-color: #ddd; cursor: not-allowed;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table> <tr> <td class="left"><input type="text" /></td> <td class="right"><input type="text" /></td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> <button>sample btn</button> </td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> </td> </tr> <tr> <td class="left"> <input type="text" /> </td> <td class="right"> <input type="text" /> </td> </tr></table><button>sample btn</button>Disabling the On-click Event
You can assign a class that has the following rule:
.off { pointer-events: none; }
to any element rendering it unclickable.
Use a class to enable click when desired:
.on { pointer-events: auto; }
The snippet demonstrates this by entering a number 1 to 4 then off or on
function toggleTD(pos, state) { var anchors = document.querySelectorAll('a'); var tgt = anchors[pos - 1]; if (state === 'on') { tgt.classList.remove('off'); tgt.classList.add('on'); } else { tgt.classList.add('off'); tgt.classList.remove('on'); } return false;}
var btn = document.getElementById('btn');
btn.addEventListener('click', function(event) { event.preventDefault(); var inp1 = document.getElementById('inp1').value; var inp2 = document.getElementById('inp2').value; return toggleTD(inp1, inp2);}, false);body { width: 100vw; height: 100vh;}table { border: 1px solid #000; width: 80%; height: 50%;}td { border: 1px solid red;}a { width: 100%; height: 100%; font-size: 1em; text-align: center; padding-top: calc(50% - .5em); display: block;}.on { pointer-events: auto; background-color: green;}.off { pointer-events: none; background-color: red;}input { width: 2em; margin-top: 5px; padding: 0 3px; text-align: center;}<table> <tr> <td><a href="/">CLICK</a> </td> <td><a href="/">CLICK</a> </td> <td><a href="/">CLICK</a> </td> <td><a href="/">CLICK</a> </td> </tr></table><label>Position</label><input id="inp1"><label>On/Off</label><input id="inp2"><button id="btn">ToggleTD</button>Disable click fot td for particular column using Jquery
The issue is because the click event from the button propagates up the DOM to the tr which then transfers the page.
To fix this you could call stopPropagation() within the button event handler:
$(".myTable").on("click", "td", function() { var issueid = $(this).closest('tr').data('issue'); console.log('Transferring to: viewminissues.jsp?issue_id=' + issueid); //window.location.assign('viewminissues.jsp?issue_id=' + issueid);});
$('.myTable').on('click', 'button', function(e) { e.stopPropagation(); console.log('Perform button action...');});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="myTable"> <tr data-issue="1"> <td>Foo bar</td> <td><button>Edit</button></td> </tr> <tr data-issue="2"> <td>Lorem ipsum</td> <td><button>Edit</button></td> </tr></table>How can I enable Onclick event of other table rows using jquery/javascript
Instead of trying to disable/enable table event listeners, you could more simply store the editing state in a variable and check it before doing any action that should be disabled while editing.
I modified your code to implement this idea ; editing state is stored in the isEditing variable. All modifications are highlighted by a // new code comment line.
update
In response to your comment, I also refactored the code by introducing setEditingState method that reduces code duplication.
$(document).ready(function() { // new code var isEditing;
//Highlight row when selected. $(function() { $('#Cases tr').click(function() { // new code if (isEditing) { return; }
$('#Cases tr').removeClass('selectedRow'); $(this).addClass('selectedRow'); }); });
//Display selected row data in text input. var table = document.getElementById('Cases'), rIndex;
for (var i = 1; i < table.rows.length; i++) { table.rows[i].onclick = function() { // new code if (isEditing) { return; }
rIndex = this.rowIndex; console.log(rIndex);
document.getElementById('DepartmentCase').value = this.cells[0].innerHTML; document.getElementById('Department').value = this.cells[1].innerHTML; document.getElementById('Charge').value = this.cells[2].innerHTML; document.getElementById('LabCase').value = this.cells[3].innerHTML; document.getElementById('IncidentReportDate').value = this.cells[4].innerHTML; }; }
// new code setEditingState(false); // Init date picker. $('#IncidentReportDate').datepicker({ changeMonth: true, changeYear: true });
//Edit Button Function $('#Edit').click(function() { // new code setEditingState(true); });
//Save Button Functions $('#Save').click(function() { table.rows[rIndex].cells[0].innerHTML = document.getElementById('DepartmentCase').value; table.rows[rIndex].cells[1].innerHTML = document.getElementById('Department').value; table.rows[rIndex].cells[2].innerHTML = document.getElementById('Charge').value; table.rows[rIndex].cells[3].innerHTML = document.getElementById('LabCase').value; table.rows[rIndex].cells[4].innerHTML = document.getElementById('IncidentReportDate').value; $('#dialog-1').dialog('open');
// new code setEditingState(false); });
//For dialog box $('#dialog-1').dialog({ autoOpen: false, modal: true });
//Cancel Button Function $('#Cancel').click(function() { // new code setEditingState(false); });
// new code // Adapt UI to editing state. function setEditingState(editing) { // Store value. isEditing = editing; // Disable/enable fields. $('#DepartmentCase').prop('disabled', !editing); $('#Department').prop('disabled', !editing); $('#Charge').prop('disabled', !editing); $('#LabCase').prop('disabled', !editing); $('#IncidentReportDate').prop('disabled', !editing); // Disable/enable buttons. $('#Edit').prop('disabled', editing); $('#Save').prop('disabled', !editing); $('#Cancel').prop('disabled', !editing); }});#Cases { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%;}
#Cases td, #cases th { border: 1px solid #ddd; padding: 8px;}
#Cases tr:nth-child(even){background-color: #f2f2f2}#Cases tr.selectedRow{background-color: #56bff0}#Cases tr:hover {background-color: #ddd;}#Cases tr{cursor: pointer}#Cases th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #455382; color: white;}#container{ margin:0 auto; width:80%; overflow:auto; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script> <script src="Scripts/jquery-1.js" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <html>
<body>
<h2> Recent Cases </h2> <table id="Cases"> <tr> <th>Department Case #</th> <th>Department</th> <th>Charge</th> <th>Lab Case #</th> <th>Incident Report Date</th> </tr> <tr> <td>123-12345-1234-383</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2011</td> </tr> <tr> <td>123-12345-1234-321</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2019</td> </tr> <tr> <td>123-12345-1234-456</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2012</td> </tr> <tr> <td>123-12345-1234-789</td> <td>Forti-Palmade</td> <td>Illegal Duping</td> <td>10-123456</td> <td>05/03/2013</td> </tr> <tr> <td>123-12345-1234-356</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2014</td> </tr> <tr> <td>123-12345-1234-297</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2015</td> </tr> <tr> <td>123-12345-1234-393</td> <td>Forti-Palmade</td> <td>Illegal Duping</td> <td>10-123456</td> <td>05/03/2016</td> </tr> <tr> <td>123-12345-1234-382</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2017</td> </tr> <tr> <td>123-12345-1234-023</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2018</td> </tr> <tr> <td>123-12345-1234-083</td> <td>Forti-Palmade</td> <td>Illegal Dumping</td> <td>10-123456</td> <td>05/03/2019</td> </tr></table>
<p><b>Case Details</b></p><br />
<table> <tr> <td>Department Case #</td> <td><input type="text" name="Department Case #" id="DepartmentCase" value=""/></td> </tr> <tr> <td>Department</td> <td><input type="text" name="Department" id="Department" value=""/></td> </tr> <tr> <td>Charge</td> <td><input type="text" name="Charge" id="Charge" value=""/></td> </tr> <tr> <td>Lab Case #</td> <td><input type="text" name="Lab Case" id="LabCase" value=""/></td> </tr> <tr> <td>Incident Report Date</td> <td><input type="text" name="Incident Report Date" id="IncidentReportDate" value=""/></td> </tr>
</table><br/>
<table> <tr> <td><input type="button" value="Edit" id="Edit" onclick=""/></td> <td><input type="button" value="Save" id="Save" onclick=""/></td> <td><input type="button" value="Cancel" id="Cancel" onclick=""/></td> </tr></table></body>
</html>onclick is set for <tr> How to disable for one <td>
In somefunction you could check the cellIndex of the td, and return early, if a non-clickable cell has been clicked. Something like this:
function somefunction (e) {
if (e.target.cellIndex === 1) {return;}
/* Do something, the td is clickable */
}
To get this work with an inline handler, you've to pass the event object:
<tr onclick='somefunction(event)'>
A live demo at jsFiddle.
Things will get a bit more complex, if you've elements within cells. In that case you have to find a td parent element, like so:
function somefunction (e) {
var target = e.target; // Cache the target element
while (target) { // Iterate through elements
if (target.tagName === 'TD') { // TD found, stop iteration
break;
}
target = target.parentElement; // Set target as a parent element of the current element
}
if (target === null) {return;} // Check that we really have a TD
if (target.cellIndex === 1) {return;} // A non-clickable cell clicked
:
}
A live demo at jsFiddle.
Edit 2018
In 2018 elements have closest() method, hence the loop above is not needed, target = e.target.closest('td') will make sure a td is used.
A very simple way would be to use CSS pointer-events: none, but unfortunately this doesn't work in FF in this particular case in IE<11 at all, though works well in Chrome and IE11. Also preventing pointer events would be bad, if the cell happens to contain interactive elements.
A live demo at jsFiddle.
jQuery - Disable live click event for particular td
I somehow change my controller to do it in a "dirty" way i would say?
// Function to return min amount, if null return "-"
public string GetMinAmount(int id)
{
var food = dbEntities.FOODs.Single(f => f.FoodID == id);
string output = "";
if (food.MinAmount == null)
{
output += "<img class=\"disable\" src=\"../../Content/Add_in_Images/disable.png\" alt=\"disable\" style=\"background-image: none\"/>";
}
else
{
output += "<h4 class=\"edit\">" + food.MinAmount + "</h4>";
}
return output;
}
Just putting my amount in a wrapper and I assign the click event to the td with the amount only...
$('.edit').live('click', function () {
Any suggestion regarding this ??
Appreciate all the feedback... Thanks....
Related Topics
How to Pass Data from Flask to JavaScript in a Template
How to Format Numbers by Prepending 0 to Single-Digit Numbers
How to Use Nestjs Logging Service
Angular 4: Cannot Instantiate Cyclic Dependency! Injectiontoken_Http_Interceptors
Check If a Number Has Repeated Digits
Possible to Detect If a User Has Multiple Tabs of Your Site Open
How to Mock the JavaScript Window Object Using Jest
Counting Records in Json Array Using JavaScript and Postman
Uncaught (In Promise) Typeerror: Failed to Fetch and Cors Error
Increase JavaScript Heap Size in Create-React-App Project
How to Modify Chartjs Tooltip So I Can Add Customized Strings in Tooltips
How to Redirect to Another Page Using Angularjs
Converting Text to Unicode in JavaScript
Access a Variable Outside of .Then Function
Webcam Js Error in Chrome: Could Not Access Webcam
Angular 4 | Window.Scrollto(); Is Not Working Properly