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/
Related
I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.
Working codesandbox:
https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js
There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.
Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.
Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.
I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820
you have to handle button click for each row. right now just one state so therefore it is showing in each cell
Maybe give this a try
https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH
hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want
This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.
Is it possible using Twitter Bootstrap to make part of a row, or a certain number of cells clickable, akin to this problem, but not for the whole row?
How do I make bootstrap table rows clickable?
Do you want each cell to be clickable? You could use code similar to that in the post you linked to:
$('.table td').click(function() {
// cell was clicked
});
This will make every 'td' element clickable. If you want just some cells to be clickable, give them a special class and then reference that in the call. For instance, give your clickable cells a "clickable" class and use the following:
$('.table td.clickable').click(function() {
// cell was clicked
});
Granted, this sets up a separate handler for each "td.clickable", rather than one event per row, but this can easily simulate making a portion of a row clickable.
tableDnD (table Drag and Drop) is a jQuery plugin I'm using to be able to re-order rows in my html table. It's a pretty cool library, but the fact that you can click, drag, and drop rows -- disables the ability to select that row by clicking -- it thinks you might be starting a drag and drop, or doing a 0-distance drag.
So you can view my example here, and see what I'm talking about -- http://jsfiddle.net/du31ufts/5/
It starts off as disabled, so enable the row re-ordering and see the library. Then, try to select just one row in the middle. The only way the blue highlighting indicating selection shows up is if you click outside the bounds of the table, and thus you would only be able to select starting from the bottom or top, and not be able to select one row at a time. I need to select these rows to be able to copy-paste these rows into excel.
I've tried looking into the library itself and detaching $('__dragtable_disable_text_selection__'), I've tried jquerys removeAttr for unselectable, I've tried
$('.dragtable-sortable').attr('-moz-user-select', 'none');
Nothing is re-enabling my ability to be able to click and select single rows. I'd like to do this without modifying tableDnD functions.
Which CSS properties could be affecting my ability to select table rows?
Create a textarea somewhere with ID #spot.
Use this code to extract data on click from a row and select it. Its delimited by tab so it should be pastable into excel easily.
$('tr').click(function(){
var copyContent = "";
$(this).children('td').each(function(){
copyContent = copyContent+$(this).text()+"\t";
});
$('#spot').val(copyContent);
$('#spot').select();
});
I asked about this on github and got an answer: It did require modification of the library. Specifically, replacing the if block starting at line 207 of the fiddle in this question with this
if (!$(this).hasClass("nodrag")) {
if (e.target.tagName == "TD") {
$.tableDnD.initialiseDrag(this, table, this, e, config);
return false;
}
}
modified fiddle. Thank you tschqr
I have a table and within this table there is a column that is entirely check boxes. This table is going to be visible on mobile devices so it would be nice if the check boxes were easy to use. So I am attempting to figure out how to have the table cell parent, td, control the checking of the check box. So the user isn't actually clicking on the check box itself but rather the table cell. To do this I setup an onclick function for the td which checks or un-checks the corresponding check box. This works fine so long as the user doesn't click on the check box itself. If that happens then the box checks itself and then un-checks itself because it is following what it normally does and then calls the custom listener afterwards. I've attempted to set the check box to disabled but a giant prohibited (no-smoking like) symbol appears when run in Chrome. So is there a way to leave the check box as a whole enabled but disable the checking functionality of it?
Edit:
I tried using the higher z-index and it didn't like that at all. Here's what the code looks like:
<td style="text-align:center; width: 20%;">
<div id="checkboxCell{{:#index}}" onclick="PageConfigHome.toggleCheckboxes({{:#index}});" style="position:absolute; z-index: 999;">
<input type="checkbox" style="z-index: 1" onclick="PageConfigHome.toggleCheckBoxes(null);" id="checkbox{{:#index}}" class="HomeScreenCheckbox"/>
</div>
</td>
Solution:
I found this post that resolved my issue: Tick a checkbox in a table cell by clicking anywhere in the table cell
have you tried passing an event to the click event and use event.stopPropagation(); which prevents events from bubbling up? See this
Put an absolutely-positioned DIV in the same cell, with a higher z-index. Put the click event on the DIV instead.
I have multiple rows with three select elements each. There are two such rows during initialization and further rows can be added dynamically. I added change events to all these elements when each row is added such that all the other elements in a particular row change when one of the drop downs in that row is changed. There is also another select element #foo that is not a part of any row (it is displayed on top of the page) which on change should change the contents of all the select elements on all rows.
I tried doing this by adding jQuery("#foo select").change(callback_function) while adding the change events for each row. But when I do this, changing #foo updates only the last inserted row and not the other rows. How do I make it work in such a way that changing #foo updates all rows?
Any solutions will be greatly appreciated.
It would be easier to answer if you provided some source code, but from what I understand (When the select element with an id of foo is changed, the other select elements are changed by a certain function) this might work for you:
$("#foo").on('change', function() {
$('select.other-selects').each( function (i) {
callback_function();
});
});
Where .other-selects is the class you designete you others select elements with.