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/
Related
I have this table: https://codepen.io/anon/pen/bjvwOx
Each time I click a row (e.g 1st row 'NODE ID 1'), the div with the id #divTemplate should appear below the row as you can see in the demo link.
The problems are (I know of) :
The div displays all the contents from endpointsData object(e.g if I click on the first row,
the div should contain 'EPID: 1', not 'EPID: 1234' as you can see in demo).
The 'accordion' display of the div works chaotic. In demo you can see if you press
multiple times on a row, the div just appears in different places, till it doesn't work any more
For the 1st problem I did this: https://codepen.io/anon/pen/Owvbae (I selected each id from div)
$("#epid").text(roomValue[key[0]]);
$("#clslist").text(roomValue[key[1]]);
$("#type").text(roomValue[key[2]]);
$("#zplus").text(roomValue[key[3]]);
Is there a way I can loop this?
Any ideas for the second problem?
To fix the 'accordion' you should put it in your <tr class="header">, then use jquery and listen when pressed on it.
$('.header').on('click' function() {
// code
});
After that use $('this') to get what has been pressed, and target it's children row .children([selector]) to manipulate the acordion.
I have table containing 4 main rows and one (expand or collapse) button.On click of (expand or collapse) button i want to insert one more row in middle of all rows(which result in total 8 rows) by iterating the table rows.How to do this using Javascript?See the image below.Any suggestion.
This is the code i have return on click of Expand or Collapse button,
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i) {
//what code need to add here
});
});
Due to the fact, that you haven't provided a code example, I only can suggest one way to achieve this.
You can determine the row above the row you'll want to insert by an id on the tr or by a css selector like :nth-of-type(4) for example.
After that, you can use this row as jquery element (example: $("tr#yourrow")) and append a row after it using append().
Example: $("tr#yourrow").append("<tr>... your row definition ...</tr>")
Based on the updated question:
jQuery('#btnId').click(function() {
var that = this;
$("#example tbody tr").each(function(i, object) {
$(object).after("<tr>... your row definition ...</tr>")
});
});
The row definition should be done by yourself. I don't know the logic behind the iteration in your case. But I think you'll get it. :)
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 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.
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.