Get the row index of bootstrap table in click without using jquery - javascript

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)
...
};

Related

Retrieving column values from a table by clicking row with jquery and html

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>

Getting values from td using .closest is not giving out value

I create the table like so:
<table class="table" id="tbl_items">
<thead>
<tr>
<th>
Id
</th>
<th>
Item
</th>
<th>
Serial Key
</th>
<th>
Brand
</th>
<th>
Quantity
</th>
<th>
Description
</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
ViewBag.AccountID = item.AccountId.ToString();
if (item.Items != null)
{
foreach (var itemOnList in item.Items)
{
<tr>
<td class="cls-itemid" data-itemid="#itemOnList.ItemId">#Html.DisplayFor(model => itemOnList.ItemId)</td>
<td class="cls-itemname" data-itemname="#itemOnList.ItemName">#Html.EditorFor(model => itemOnList.ItemName)</td>
<td class="cls-serialnumber" data-serialnumber="#itemOnList.SerialNumber">#Html.EditorFor(model => itemOnList.SerialNumber)</td>
<td class="cls-brandname" data-brandname="#itemOnList.BrandName">#Html.EditorFor(model => itemOnList.BrandName)</td>
<td class="cls-quantity" data-quantity="#itemOnList.Quantity">#Html.EditorFor(model => itemOnList.Quantity)</td>
<td class="cls-description" data-description="#itemOnList.Description">#Html.EditorFor(model => itemOnList.Description)</td>
<td>
Edit |
Delete
</td>
</tr>
}
}
}
</tbody>
I am trying to get the value of td in a row using this:
$(".btn_edit").click(function() {
var row = $(this).closest("tr");
var text = row.find(".cls-itemname").text();
alert(text);
});
The alert box has no value. I cannot use the data-item because when I change the value of the #Html.EditorFor boxes, it gives the old values and not the new ones.
Since you use #Html.DisplayFor() which returns an <input> element... I guess you want to have the input's text...
This will work:
$(".btn_edit").click(function() {
var row = $(this).closest("tr");
var text = row.find(".cls-itemname input").val(); // <-- Look the change here
alert(text);
});
There is simply no text in the .cls-itemname element... But there's an input having a value. Use .val() against the input.

showing adjacent rows in a table using jquery

I am using mvc5 and razor and I have all data required bound to the view.
View.cs
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.TestTermin)
</th>
<th>
#Html.DisplayNameFor(model => model.Location)
</th>
<th>
#Users applied
</th>
</tr>
#foreach (var test in Model)
{
<tr class="text-left">
<td>
#Html.DisplayFor(modelItem => test.TestTermin)
</td>
<td>
#Html.DisplayFor(modelItem => test.Location)
</td>
<td>
#test.Users.Count
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = test.ID }) |
#Html.ActionLink("Details", "Details", new { id = test.ID }) |
#Html.ActionLink("Delete", "Delete", new { id = test.ID })
</td>
</tr>
foreach (var user in test.Users)
{
<tr class="hideMe" style="display:none">
<td>#user.FirstName</td>
<td>#user.LastName</td>
<td>#user.Email</td>
</tr>
}
}
</table>
This results in a html like this:
<tr class="text-left">
<tr class="hideMe">
<tr class="hideMe">
<tr class="text-left">
<tr class="hideMe">
<tr class="text-left">
Is there a way, using jQuery, or something else from the mvc5/razor suite, that can achieve the following:
Clicking on a row, shows the adjacent hidden rows, and on click hides them back again? I do not want to show ALL hidden rows in the table, just the ones that belong to the clicked tr.
I have tried the following:
<script type="text/javascript">
$('tr').click(function () {
var $this = $(this);
$('tr').toggle('slow');
});
</script>
but this just shows everything hidden, and hides everything visible which is not the functionally I am after.
The problem in your code $('tr').toggle('slow'); is that the selector $('tr') selects all the tr's and toggles the display of all the tr's. What you need is to just select the next couple of tr's to the current clicked tr and toggle its display. You can make use of the Jquery .nextUntill() feature.
Working Fiddle
$('tr.text-left').click(function () {
$(this).nextUntil("tr.text-left").toggle('slow');
});

Order of a <td> in a <tr>

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.

Using JavaScript to move node

I have a table structured as below. As I cannot change anything about how the HTML is created but I can add some lines I want to solve this via JavaScript.
What I want is that:
(1) the table gets an additional <thead> element
(2) the <tr> element with class firstline becomes a child of <thead>
<table>
<tbody>
<tr class= firstline >
<th> 1st column </th>
<th> 2nd column </th>
</tr>
<tr class= content >
<th> foo </th>
<th> bat </th>
</tr>
</tbody>
</table>
So far, I manage to delete the <tr class= firstline > element and I manage to add a <thead> element to the table. But I have no clue how to insert the <tr class= firstline > into the <thead> ???
var firstLines = document.getElementsByClassName("firstline");
for (var i=0; i<firstLines.length; i++) {
var FLparent = firstLines[i].parentNode.parentNode;
var tbody = document.createElement("thead") ;
FLparent.insertBefore(tbody, FLparent.firstChild);
FLparent.firstChild.appendChild(firstLines[i]);
firstLines[i].parentNode.removeChild(firstLines[i]);
}
It could be as simple as:
var
table = document.querySelector('table'),
tHead = table.insertBefore(document.createElement('thead'), table.firstChild);
tHead.appendChild(
table.querySelector('tr.firstline')
);
http://jsbin.com/ruza/3/

Categories