<script type="text/javascript">
$(".inventory-notes").bind("click", function() {
if($(this).text().length > 0) {
alert($(this).text());
alert($(this).closest(".inventory-notes").children().text());
}
});
</script>
example table
<table id="inventory" class="table">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Usage</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr class="items">
<td>Hatchet</td>
<td>24,000 Gold</td>
<td>Woodcutting</td>
<td><div class="inventory-notes"><div id="299"><img src="addnotes.png"></div></div></td>
</tr>
</tbody>
</table>
How can I get the value 299 from the child div of inventory-notes? The table really contains at least 1,000 rows of items each containing a random ID.
I am using jQuery 1.6.2 so I cannot use the .on() function.
Since you're using jQuery 1.6.2, I'd use .delegate:
$("#inventory").delegate(".inventory-notes", "click", function(){
var id = $(this).find("div").prop("id");
});
Since you're going to have 1,000+ rows, you don't want to bind the event to the actual rows, resulting in 1,000+ handlers.
Related
I'm trying to alert the table(parent) class on click using the child id <th id="first">.
alert($(this).parent('tr').attr('class')); using this i have got the class of the <tr>.
But i want to get the class of the table when i use alert($(this).parent('table').attr('class')); it showing alert says undefined can someone help me how can the parent class using the child id
<table class="table table-bordered">
<thead>
<tr class="sample">
<th id="first">Firstname</th>
<th id="last">Lastname</th>
<th id="user">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>arun </td>
<td>kumaresh</td>
<td>arun kumaresh</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$("#first").click(function(){
alert($(this).parent('tr').attr('class'));
});
});
</script>
Use .closest(TARGET_SELECTOR), For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
As .parent(SELECTOR), Get the parent of each element in the current set of matched elements, optionally filtered by a selector. (the parent() method traverses to the immediate parent)
$(document).ready(function() {
$("#first").click(function() {
alert($(this).closest('table').attr('class'));
});
$("#last").click(function() {
alert($(this).closest('thead').attr('class'));
});
$(".user").click(function() {
alert($(this).closest('table').attr('class'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-bordered">
<thead class='ANY_CLASS'>
<tr class="sample">
<th id="first">Firstname</th>
<th id="last">Lastname</th>
<th class="user">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>arun</td>
<td>kumaresh</td>
<td>arun kumaresh</td>
</tr>
</tbody>
</table>
simply use
alert($(this).closest('table').attr('class'));
refer closest here
https://api.jquery.com/closest/
I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');
I have multiple tables inside div with same columns and I want them to convert to one table with all records from that tables.
Can it be done with jQuery?
My HTML looks like this:
<div id="multiTabels">
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 1</td>
<td>Record 2</td>
</tr>
</table>
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 3</td>
<td>Record 4</td>
</tr>
</table>
</div>
Try this :
$(function(){
var $firstTable = $('#multiTabels table:first');
$('#multiTabels table:not(:first)').each(function(){
$firstTable.append($(this).find('tr').has('td'));
$(this).remove();
});
});
JSfiddle Demo
Anything can be done with jQuery.
There's a really big thing to point out with my jsFiddle: I am using the thead and tbody tags. This is really important for segregating rows and is a semantic step forward in HTML. If you inspect tables in your dev console, you'll notice most browsers automatically add a tbody around all tr elements in a table now, so it's good to start doing this.
https://jsfiddle.net/wumztk45/
// This binds a hook to the document.
// If any 'click' events happen to an element with the id "cruch" this event fires.
// This event will persist even when crunch is deleted, and is good
// for when binding to elements that may not exist at the time.
$(document).on('click', "#crunch", function(event) {
// Find our container.
var $multiTables = $("#multiTables"),
// Find all tables in our container.
$tables = $multiTables.children("table"),
// From all tables after the first, find all <tr> elements within <tbody> elements.
$rows = $tables.not(":first").children("tbody").children("tr");
// Append these rows to the first table's tbody.
$tables.first().children("tbody").append( $rows );
// Remove the other tables.
$tables.not(":first").remove();
// Disable this button.
$(this).prop( 'disabled', true );
} );
Try this:
$(document).ready(function (){
$("#multiTabels table tr").each(function(){
$("#newTable").append($(this)); //append to any new table
});
});
JSFiddle: http://jsfiddle.net/9u8tnh97/
I'm using jQuery and Bootstrap. I have a table with 4 <tr> elements like this:
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr class="hover-data">
<td>Mark</td>
<td>Otto</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link1</td>
</tr>
<tr class="hover-data">
<td>Larry</td>
<td>the Bird</td>
</tr>
<tr class="hover-link hide">
<td colspan="2">Some link2</td>
</tr>
</tbody>
</table>
And this is my Javascript:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().show();
$(this).hide();
} else {
$(this).prev().show();
$(this).hide();
}
});
At first, I'm hiding the two rows with class table-hover by giving them a hide class and I'm only showing the ones with class table-data.
What I want to achieve: When I hover a tr with class table-data, I want the next and immediate tr with class table-hover to show and the "hovered tr" to hide.
When I move the mouse outside again I want everything to be restored and only see the tr with class hover-data
Not sure why my code won't work. Any ideas?
This one uses mouseenter on the original rows and mouseleave on the new rows.
$('table tbody').on('mouseenter', 'tr.hover-data', function () {
$(this).next().show();
$(this).hide();
}).on('mouseleave', 'tr.hover-link', function () {
$(this).prev().show();).hide();
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/15/
I noticed that the bootstrap hide class is a little too "strong" and overrides show() so I also changed those to style="display: none" for now. Instead use your own class e.g. hideme in the following example: http://jsfiddle.net/TrueBlueAussie/9u8tnh97/17/
I am using delegated events (out of habit, and so they can share a common selector), but two separate "normal" (static) selectors will likely work just fine too. e.g. http://jsfiddle.net/TrueBlueAussie/9u8tnh97/16/
Like this:
$('table tbody tr').hover(function() {
if($(this).hasClass('hover-data')){
$(this).next().toggleClass('hidden');
}
});
https://jsfiddle.net/gqyrpnes/
I have this table, and I want to add Rows up the button, in the same rowId. For example, on clicking the Add Row 1 button, i want to add a row in row1, under "Some content 1", and so on.
<table id="table1">
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr id="row1">
<td>Some content 1<td>
<td><button id="addButton1">Add Row 1</button><td>
</tr>
<tr id="row2">
<td>Some content 2<td>
<td><button id="addButton2">Add Row 2</button><td>
</tr>
<tbody>
</table>
This is the script I use so far:
$("#addBtn").on("click", function () {
$("#table1 tbody").append("<tr><td>1</td><td>1</td></tr>");
});
This is adding rows at the end of the table. How can I add rows in between, in the same section, using jQuery?
Try to use .closest() along with .after() to achieve what you want, and you should use id starts with selector in this context or you can add one common class for all of that buttons and use that as a selector.
$("[id^=addButton]").on("click", function () {
$(this).closest('tr').after("<tr><td>1</td><td>1</td></tr>");
});
Side Note: I have edited some of your ugly html in order to make your code valid
DEMO
You can do like this.
$("#table1 button").on("click", function () {
$(this).parents('tr').after("<tr><td>1</td><td>1</td></tr>");
});