I have a simple table within a content editable div like so:
<div contenteditable="true">
<table class="rwd-table" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
When you click a cell, I'm using jQuery to add an ID to that cell. The ID has CSS applied to highlight it.
$(document).on('click', 'td, th', function (event) {
// remove previous highlighted cell
$('#selectedCell').removeAttr('id');
// highlight new cell
$(this).attr('id', 'selectedCell');
});
When the highlighted cell looses focus, the ID should be removed. This is my problem.
// DOES NOT WORK :( //
$(document).on('blur', '#selectedCell', function (event) {
$('#selectedCell').removeAttr('id');
});
I'm assuming it's because table cells don't normally have focus/blur events.
Is there a way to detect blur on a table cell within contenteditable?
Here is a live example: http://jsfiddle.net/5c7br6zc/
Yes, the problem with blur event. Instead of relying on it try to bind click event on document and prevent it from bubbling in case if click occurred on TD:
$(document).on('click', 'td, th', function (event) {
$('#selectedCell').removeAttr('id');
$(this).attr('id', 'selectedCell');
event.stopPropagation();
});
$(document).on('click', function (event) {
$('#selectedCell').removeAttr('id');
});
Demo: http://jsfiddle.net/5c7br6zc/1/
Related
I have a clickable parent element. As a child element I have a dropdown. When I click this dropdown, it also triggers the parent element.
The table elements are rendered dynamically as rows, thus I would like to target the elements by Id and not by class.
I have tried with e.stopPropagation() but then it prevents the dropdown to toggle.
Very thankful for any help!
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
alert("Entire row clicked")
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked")
//e.stopPropagation(); I have tried this but it prevents the dropdown from triggering at all.
})
<tr id="entirerow"+doc.id>
<td>
<span>
<button id="dropdown"+doc.id>myDropdown</button>
</span>
</td>
<td>
...
</td>
</tr>
You could return early in your parent listener callback if the event target is the dropdown.
document.getElementById("entirerow"+doc.id).addEventListener("click", function(e){
if(e.target.id === ("dropdown"+doc.id)){
return;
}
alert("Entire row clicked");
})
document.getElementById("dropdown"+doc.id).addEventListener("click", function(e){
alert("Only button clicked");
})
This is the code
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
I want to select data of ID c1 under < tr > tag.
I am using this jQuery code but it is selecting whole text under < tr > tag.
$("#table-body").on('click','tr',function(e){
e.preventDefault();
console.log($(this).text());
})
I am getting AAA02% as the output if this code.
I want to select AAA0 and 2 separately.
How to do it ?
Since there is more than one td element in each clicked tr element, you have to loop through each of them to get the text individually.
You can use find() and each() like the following way:
$("#table-body").on('click','tr',function(e){
$(this).find('td').each(function(){
console.log($(this).text());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody id="table-body">
<tr>
<td id="c1">AAA0</td>
<td id="c2">2%</td>
</tr>
</tbody>
</table>
Try this:
console.log($(this).find('.c1').text());
And use class attribute instead of id
You are getting all text inside tr because you are binding click event on the tr and so $(this) refers to thetr you clicked.
To get AAA0 only, you can use children() and pass id to select a specific td
$("#table-body").on('click','tr',function(e){
console.log($(this).children('#c1').text());
});
But since you are assinginig id to the td's, you can also directly attach the click event to the td as
$("#table-body #c1").on('click','tr',function(e){
console.log($(this).text());
});
I'm trying to stop the bubbling of event of an inner checkbox to the click event of the tr element.
I have the following mark up:
<table border="1">
<tr class="row">
<td>
Item 1
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
<tr class="row">
<td>
Item 2
</td>
<td>
<input type="checkbox" class="cb">
</td>
</tr>
</table>
The rows are dynamically added, so to add listeners automatically to dynamically added elements, I used the following code:
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
e.stopPropagation();
alert(2);
});
});
However the event still bubble up to the tr element. I tried also the following:
e.stopImmediatePropagation();
window.event.cancelBubbles = true;
e.bubbles = false;
none seemed to work.
I reproduced this issue with JSFiddle:
JSFiddle
In this case, there is no event bubbling occuring because you have different events defined on different elements that just so happen to both fire when a mouse clicks on the check box (because you have also clicked a row).
You should either not add the row click event listener at all, or move stopPropagation to the the other handler to stop it from firing.
$(document).ready(function() {
$('body').off('click.row').on('click.row', '.row', function() {
e.stopPropagation();
alert(1);
});
$('body').off('change.cb').on('change.cb', '.cb', function(e) {
alert(2);
});
});
How to hide All rows except current (clicked Row) using jQuery?
I want to hide all rows when i click the particular row except current one row.
<table>
#foreach (var item in Model)
{
idValue++;
<tr class="tableRow" id="#idValue">
<td class="master" id="#item.Batch_Seq">
<a href= "#" >#(item.Batch_Name)></a>
</td>
<td>
#(item.Present)
</td>
<td>
#(item.Absent)
</td>
<td>
#(item.HalfDay)
</td>
<td>
#(item.Batch_count)
</td>
</tr>
}
</table>
I tried like this
$('.tableRow').hide();
$(this).closest('tr:not(.tableRow)').hide();
Could anyone help me?
You seem to want this :
$('.tableRow').click(function(){
$('.tableRow').hide(); // hide all rows
$(this).show(); // show the clicked one
});
Note that the user can't notice the row was hidden then shown : the screen isn't repaint until the event handler ends.
Use .not() to select all elements with class tableRow except for the one that was clicked(this)
$('tr.tableRow').click(function() {
$('tr.tableRow').not(this).hide();
});
You can use not() to hide everything that isn't "this":
$('table tr.tableRow').click(function(){
$('table tr').not(this).hide(); // hide everything that isn't "this"
});
or you can use .siblings() to hide the siblings of the clicked row
$('table tr').click(function(){
$(this).siblings().hide(); // hide the siblings of the clicked row
});
Working example : http://jsfiddle.net/ouadie/U7eUR/
I have a JavaScript object. And you can see the line:
window.gv.borderiseTDCell(this);
Is tigthly coupled to the window (if gv is not initialised it crashes). However what I really want is to be able to do is:
//bind the click event
jQuery('.highlightableTDCell').click(function () {
borderiseTDCell(this);
});
But that doesn't work. Any ideas what I can do? This is the full lisinng (with tight coupling):
gridview = function () {
//bind the click event
jQuery('.highlightableTDCell').click(function () {
window.gv.borderiseTDCell(this);
});
};
//selecting cell
gridview.prototype.selectCell = function (obj) {
//dostuff to cell
};
And a page...
<table class="EditTable" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="">0</div>
</td>
<td>
<div style="">0 akudsfsa fdhsad fiasgdf swae</div>
</td>
<td class="highlightableTDCell">
<div>
<input value="0.00"/>
</div>
</td>
</tr>
</table>
It's probably because you're using this when you should be using $(this)
borderiseTDCell($(this));
Also, gridview doesn't seem to be defined:
var gridview = function (){}
Not sure why you'd need a library to outline a table cell. How about creating a class called outlinedCell
.outlinedCell{border:1px solid #f00;}
Then you can add, remove, or toggle this class
//bind the click event
$('.highlightableTDCell').click(function () {
$(this).addClass('outlinedCell');
// or // $(this).removeClass('outlinedCell');
// or // $(this).toggleClass('outlinedCell');
});
LIVE SAMPLE: http://jsfiddle.net/WJp2Z/