I am trying to find that is the order of the <td> in a <tr>. I have a table structure like this
<table>
<tbody>
<tr>
<th> Name </th>
<th> Edit </th>
<th> Delete </th>
<tr>
<tr>
<td> Tom </td>
<td> <i class="icon icon_edit"></i> </td>
<td> <i class="icon icon_remove"></i> </td>
<tr>
<tbody>
</table>
I have to find table header <th> Edit </th> using the <i class="icon icon_edit">. I was trying to find it using the parents() but still didnt got any method to find the position of the parent <td> in the row.
My logic is like this
parentTD = $('.icon_edit').parents('td')
positionOfparentTD = 2 //Which i dont know how to
correspondingHeader = $("table th:eq(2)")
How can I implement this in jQuery?
jQuery has an index() method, it's zero based but so is eq()
var parentTD = $('.icon_edit').closest('td')
var positionOfparentTD = parentTD.index(); // 1
var correspondingHeader = $("table th:eq("+positionOfparentTD+")")
var tdIndex=$('.icon_edit').parent('td').index();
$("table th:eq('"+ tdIndex+"')");
Fiddle DEMO
Try using .index() and i would suggest you to use .closest() instead of .parents(),
parentTD = $('.icon_edit').closest('td');
positionOfparentTD = parentTD.index();
correspondingHeader = $("table th:eq("+ positionOfparentTD +")")
I would rather use a class on the header, because if you change the order of the columns some day, your Javascript will probably forgotten to be updated and therefore will not work anymore.
Here is what I would do:
<table>
<thead>
<tr>
<th>Name</th>
<th class="edit-header">Edit</th>
<th>Delete</th>
<tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td class="edit"><i class="icon icon_edit"></i></td>
<td><i class="icon icon_remove"></i></td>
<tr>
<tbody>
</table>
And then would do this with jQuery:
var $editHeader = $('.edit').parents('thead').find('.edit-header');
I added the edit class as well on the edit cell, because the icon class name might change as well.
Related
I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>
I have a bootstrap table in my react project. I want to get the index of row which I click on. I want to do something like this onclick = {this.handleClick} and in handleClick function I want to get the index of row. Is it possible to do it. Most of the solutions available shows everything using jquery and I don't want to use Jquery. I want to do it using just javascript only. This is my table
<Table className='flags-table' responsive hover>
<thead>
<tr>
<th> </th>
<th> Time In </th>
<th> Time Out </th>
<th> Type </th>
<th> Category </th>
</tr>
</thead>
<tbody>
{
FLAGS_LIST.map((x,i)=> (
<tr key={i}>
<td> <div className='red-box'></div> </td>
<td> {x.time_in} </td>
<td> {x.time_out} </td>
<td> {x.type} </td>
<td> {x.category} </td>
</tr>
))
}
</tbody>
</Table>
You can use code like this:
onclick = {this.handleClick.bind(this, i)};
and handleClick should declare like this:
var handleClick = function(i) {
console.log("key of row", i)
...
};
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 a following (simplified) table structure:
<table class="form-table">
<tbody>
<tr>
<tr><--Need to select and add class on this guy based on h3 class "check"-->
<th scope="row">
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
So i want to select "table row" above the h3 class "check". Table is generated dynamically so i can't just use :eq() ,:gt() or :lt().
To select this guy i am using this code:
$('tbody tr').find('h3.check').parent().addClass('cool');
$('.cool').parent().addClass('until');
But the problem is that i am giving an unnecessary class "cool" in order to make a selection.
<table class="form-table">
<tbody>
<tr>
<tr>
<tr class="until"><--Class successfully added but..-->
<th class="cool" scope="row"><--An extra Class in order to select "table row"-->
<h3 class="check">Default Checbox:</h3>
</th>
<td>
</tr>
</tbody>
</table>
Is there a better way for doing this (without adding unnecessary Class) ?
You can use .has()
$('tbody tr').has('h3.check').addClass('cool');
or :has
$('tbody tr:(h3.check)').addClass('cool');
I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.