I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?
You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.
Related
I have a html table 'TemplateData' populated dynamically from a db table...so for example could end up like:
ID Name Age
1 John 23
2 Mick 27
3 Mark 29
When the user clicks an image on screen it will post back the corresponding ID value. From here I want to change the background colour of the associating row.
So for example '2' has been posted back in 'fid'. so I have tried...
function highlightRowInTable(fid) {
var dtable = $("#TemplateData");
dtable.addClass("highlightedRow");
}
However this highlightes the outer cells of the table. I only want to highlight the corresponding row.
Iv been messing around with parents and siblings but cant find any working examples on line...any ideas?
It looks like your code is selecting the entire table, and then applying a class to it, though it is hard to say for sure. If you have an event listener attached to your table, you should be able to get the child element that was clicked on and toggle its class.
document
.getElementById('table')
.addEventListener('click', function(event){
// now event refers to the part of the dom that was clicked on
console.log(event)
});
Though I'm not sure without looking at your code. if you already have listeners set up, you might need to give every row an id based on fid, so that your function could specify the id to add class to.
function highlightRowInTable(fid) {
$(fid).addClass("highlightedRow");
}
when you create your table you can add an attribute to your <tr> to help select it later when an image is clicked.
#foreach (var row in table)
{
<tr data-uid="#row[id]">
<td></td>
</tr>
}
function highlightRowInTable(fid) {
var rows = $('tr').filter('[data-uid="' + fid + '"]');
rows.addClass("highlightedRow");
}
How to get row value of a table on mouse click? Data in this table is populated from the data returned using AJAX.
Below is the code which is not working:
$('table#tblBdy tbody tr').click(function() {
$('tr').click(function () {
var tableData = $(this).closest("tr").children("td").map(function() {
return $(this).text();
}).get();
$('#bx1txt').val($.trim(tableData[0]));
$('#bx2txt').val($.trim(tableData[1]));
$('#oldqty').val($.trim(tableData[1]));
});
I'm not sure I completely follow your question, your title and descriptions seem to conflict. Are you looking to get the value you a specific cell on click? Your question says you want the value of a row...
If I understand it correctly, you either want the value of a specific cell when it is clicked, or you want to highlight the row of that cell that you are clicking.
I have setup a codepen http://codepen.io/anon/pen/oXNeMx with a simple solution.
Depending on how the table is generated, you can put that javascript code into it's own function and call that function whenever you have new AJAX data so that the click handler gets bound to the table and elements.
//handles table cell click events
$('td').click(function(){
//updates the value
var cellValue = $(this).html();
//find the row of table where cell was clicked
var tr = $(this).closest('tr');
//removes select class from all rows
$(tr).siblings().removeClass('highlight');
//adds class to highlight selected row
tr.addClass('highlight');
});
The reason your code is not working is because you attach an event handler to some elements, but then you replace those elements with new ones from the AJAX call.
You need to set an event handler on an element that will not change, for example, the table (if you table gets replaced in its entirely, you need to find a higher ancestor that never changes).
// ancestor event real selector
$('#tblBdy').on('click', 'tbody td', function() {
// Same code as yours in the handlers
});
I have logic for cells in a row to be highlighted when the first cell text is clicked working just fine. When the page loads however, I want to default the first row to be highlighted as the first row is displaying some other data based on it's id.
What works when the first cell text (id) is clicked is:
$("#simHeaderTable").find("tr").each(function () {
var tdID = $(this).find("td:first-child").text();
if (tdID == ID)
$(this).children("td").css("background-color", "#FFFF66");
else
$(this).children("td").removeAttr("style");
});
So my logic was that this finds all rows and loops over them. I checked the first cell in each row and if the cells text is equal to some id I "highlight" it with some css. I unhighlight all the others.
So now inside document ready to highlight the first row on page load I figured I would just do the following, which doesn't result in anything getting highlighted.
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
To me, this finds the first tr/row and then finds all children that are cells/td and applies the css to set the background color to yellow. Any idea why this isn't working?
Your statement is much more complex than needed, instead of:
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
try:
$("#simHeaderTable tr:first-child > td").css("background-color", "#FFFF66");
You can even leave out the '>' unless you have nested tables.
Usually, you only use .find() when you have a cached selector like:
var cached_obj = $('#something');
// lots of code
var cached_obj.find('.something_else');
I have a script that if I click anywhere in the row it takes me to the link found in column 1. It works great. However I want to put a button in the final column, and if I click the button, it takes me to the link in the first column. So I want my script to exclude the final column. However, now when I click in a cell instead of taking me to the link in the first cell of the row, it takes me to the link in the first column, first row. Or a better solution would be to exclude only the button from the script, not the entire cell. How would I exclude that from this script below?
<script>
$('tbody tr td:not(:last-child)').click( function() {
window.location = $('tbody tr td').find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
</script>
You can use another click function on your button with stopPropagation. For example:
$('tbody tr td').click(function(){
//its ok, dont change this
});
$('.yourButton').click(function(e){
e.stopPropagation();
// do your stuff
})
Made a fiddle: http://jsfiddle.net/a2Sd6/
Next problem:
Workaround (without stopPropagation()): http://jsfiddle.net/a2Sd6/1/
Am having a task in some onclick functions.I had a table in which each column contains a dropdown list or text box. one of the column contains a button.If i click that button the row with dropdownlist,textboxes including add button have to dynamically add as the next row.how can i do this?which will be better javascript or jquery..plz help me out..
You can try the following
in onclick of the row add the following function
function cloneRow(event){
var tar_ele;
if ($.browser.msie) {
// IE takes SRCELEMENT for event source.
// may the force shred IE.
tar_ele = $(event.srcElement);
} else {
tar_ele = $(event.target);
}
// Now take the parent of the clicked item as the item is a button in a row
var row = tar_ele.parent();
// Now clone the row and add it to the parent.
row.clone().appendTo(row.parent());
}
Hope this helps.
You can try this:
$('button-id').click(function() {
$('container-id').after('<input /><select />');
});
Something like that, will have you added a new line with input and select boxes to the end of the container or your table.