If a tag like DIV, MARQUEE or IMG is inserted, it can be selected when clicking anywhere in the tag area. However, if a TABLE is inserted, it can only be selected when clicking on the border of tag area. I have searched for the possible event (onclick, keydown) defined for DIV, but unfortunately no relevant Javascript code was found. DesignMode is used for the editor. Anyone knows how to make TABLE easier to be selected just like a DIV?
You can do it using a ControlRange and selecting it. Assuming the table element is stored in a variable called "table":
table.onclick = function() {
if (document.selection.type != "Control") {
var range = document.body.createControlRange();
range.add(this);
range.select();
}
};
jsFiddle: http://jsfiddle.net/DTK8j/
It probably means that table was created so that an event was defined for each cell and possibly each row has an event also. When you click on any area in the row (if there was not padding given for the cell) the cell event was fired up and detect the cell event first not the row event. Likewise the click on the row will trigger the row event rather than the table event.
So it's difficult, but if you didn't define any event like onclick or any event on each row or cell then you only get the table event; otherwise the defined event on any row or cell will be activated in preference to the table event.
Related
I feel silly for asking this, it seems like it should be very simple, and yet after several hours - here I am.
I have an HTML Table with <td> cells inside. Each cell has a default of "0". I'm trying to figure out how to select the cell contents upon tabbing and/or clicking into the cell. I've tried using CSS (i.e,. user-select: all; user-select: text) and the best I can do with javascript is to clear the cell on click:
document.getElementById(tableId).addEventListener('click', (e) => {
if (!e.target.contentEditable === "true") return; //using this to register clicks on a cell
e.target.innerText = ""
})
I'd really like to just select the contents - not clear them - so the user can leave the value there and tab to the next one if they want to keep the default value. I've tried using "focus" events and the like, to no avail. How do I just select the text inside?
Any help is appreciated! Thanks!
"Try using onfocus" (on the cells in the table)
I have a page with a datatable ("main") and another datatable ("info") that's hidden with "display:none". Some rows in "main" can open a child row, and the "info" datatable is then inserted into the child row. The way it's inserting the info row is by using removeChild on info's parent ("changesContainer") from the DOM and then inserting the outerHTML into the child row.
var source = document.getElementById('changesContainer')
var content = source.removeChild(source.firstElementChild)
target.innerHTML = content.outerHTML;
This kills all the event listeners on the search box, pagination, etc. Is there a way to re-initialize or re-add the event listeners to it, or another way to move it into the child row that will keep the event listeners?
I have a table and in every cell there is OnMouseDown event and OnMouseUp event. I click the first cell then I drag mouse to the other cell and when I stop holding the mouse, it gets the details from both the starting cell and the ending cell so I can create range from those two numbers.
Problem is it only works the first time. When I do it second time and the same cell range it shows me Error cursor. But when I click somewhere else it behaves like it resets the onMouseDown event and I can do it again.
Example Code:
Every cell looks like this:
<td id='20' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>
<td id='21' onmousedown='OnMouseDownStart(this.id)' onmouseup='OnMouseDownEnd(this.id)'></td>
function OnMouseDownStart(id){
$('#details').find('#startday').html(id);
}
function OnMouseDownEnd(id){
$('#details').find('#endday').html(id);
}
Problem solved.
When there is nothing inside cell you need to add also CSS property: user-select:none
Then it works perfectly. Otherwise if there is text or blank cell without this css property it will try to move highlighted things.
Can anyone help me how to make a lights off effect in an entire table row if i click a specific textbox and remove the lights off effect if i click again the specific textbox and goes the same with other textboxes with there specific table rows.
My problem is when i click a specific textbox the textbox is the only one who is highlighted. I want it to be the entire table row on that specific textbox.
current code: http://jsfiddle.net/AP6kr/4/
If you target $(this).parent() instead of $(this), you'll get the whole row. See JSfiddle: http://jsfiddle.net/AP6kr/6/
My example is actually targeting the <td> tag, which is the parent of the input. Since it's the only td in the row, it looks the same as if you go up one more parent to the <tr> tag. you can see that effect here: http://jsfiddle.net/AP6kr/8/
It's pretty much indistinguishable now, but if you had more cells per row it would matter.
You could use pointer-events:none; on #overlay : http://jsfiddle.net/AP6kr/5/
I have a table with a class "myClass" on each row that triggers a jQuery function by click on the table row.
This works fine so far, the only problem I have is that some of the table cells contain buttons and then a click on a button also triggers the above event.
Is there a way I can prevent that the row click event is triggered when I click on a button in that row ?
I only want the event to fire by click on the row background but not by click on any button within a row.
Many thanks for any help with this, Tim.
At the top of your click event handler, put the following:
if ($(event.target).prop('type').toLowerCase() !== 'table' ||
! $(event.target).hasClass('myClass')) {
event.stopImmediatePropagation();
return;
}
What this does is say 'if the actual element isn't a table or doesn't have the class "myClass" then stop the event here and now (the return part). The stopImmediatePropagation() means that it won't propagate back up to the original selector (your 'table.myClass' in this case).
If you want the user to be able to click on ANYTHING inside your table except buttons, you would use this:
if ($(event.target).prop('type').toLowerCase() === 'button') {
event.stopImmediatePropagation();
return;
}
This will allow clicks on other elements like inputs, images, spans, divs, etc. to still trigger it. If this is not the desired behavior, you should consider putting your click event on the table cells instead of the entire table, and then just check that the target type isn't a td.