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');
});
Related
I have a table that I'm manipulating through a static js file. I made a filter to show only the lines that contain the values typed in the input. For that, I add the 'hidden' class to those that don't contain the value typed in the input. However, when I go to inspect, only the first line is configured with the "hidden" class. How do I do it for all the other lines that don't contain the values typed in the input?
The code:
HTML:
<div class="container">
<hr>
<form class="form-search">
<input class="form-control" id="form-control" type="text" name="fitrar" placeholder="Buscar Registros"
autocomplete="off" autofocus />
Limpar
</form>
</hr>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">CNPJ</th>
<th scope="col">CPF</th>
<th scope="col">Nome</th>
</tr>
</thead>
<tbody>
{% for registro in registros %}
<tr>
<td scope="row">{{ registro.id }}</td>
<td scope="row">{{ registro.cnpj }}</td>
<td scope="row">{{ registro.cpf }}</td>
<td scope="row">{{ registro.nome }}</td>
</tr>
JS:
const inputSearchRegistros = document.querySelector('.form-search input')
const tableRegistros = document.querySelector('.table tbody tr')
inputSearchRegistros.addEventListener('input', event => {
const inputValue = event.target.value.trim()
Array.from(tableRegistros.children)
.filter(regs => !regs.textContent.includes(inputValue))
.forEach(regs => {
regs.classList.add('hidden')
})
})
Result:
<tr>
<td scope="row" class="hidden">1</td>
<td scope="row" class="hidden">31024483000198</td>
<td scope="row" class="hidden">86520083534</td>
<td scope="row" class="hidden">Adriana teste esteves</td>
</tr>
<tr>
<td scope="row">2</td>
<td scope="row">31024483000198</td>
<td scope="row">86520083534</td>
<td scope="row">Adriana teste esteves</td>
</tr>
They are the same values, but only the first line receives the hidden class
I would like all lines that do not have the values typed in the input to receive the hidden class.
querySelector only returns the first element that matches the selector even if there is more than one match. You want to use querySelectorAll like this
const tableRegistros = document.querySelectorAll('.table tbody tr')
You'll then have to loop through the results like in ryan's answer or select the td elements and loop through those like this depending on what your trying to accomplish
const tableRegistros = document.querySelectorAll('.table tbody tr td')
inputSearchRegistros.addEventListener('input', event => {
const inputValue = event.target.value.trim()
Array.from(tableRegistros)
.filter(regs => !regs.textContent.includes(inputValue))
.forEach(regs => {
regs.classList.add('hidden')
})
})
Two problems:
You are using document.querySelector, which will only select the first row. You want to use document.querySelectorAll
You are iterating over the table cells using Array.from(tableRegistros.children).
// this only selects the first row
const tableRegistros = document.querySelector('.table tbody tr');
// this is a bunch of td elements
Array.from(tableRegistros.children)
Instead, you want to iterate over all of the rows, and then all of the cells in each row:
// use querySelectorAll to select all rows
const tableRegistros = document.querySelectorAll('.table tbody tr');
// Iterate each row
tableRegistros.forEach(row => {
// Then search all of the cells for the content
const containsText = Array.from(row.children).some(cell => cell.textContent.includes(inputValue));
if (!containsText) {
row.classList.add('hidden');
} else {
row.classList.remove('hidden');
}
});
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 this table in html, and I load it with Php Laravel
<div class="form-row col-md-12">
<table id="contacts" class="table table-striped">
<tbody>
<tr>
<th>Id</th>
<th>Cel</th>
<th>Tel</th>
<th>Email</th>
<th>Actions</th>
</tr>
#if(isset($contacts) && count($contacts)>0)
#foreach($contacts $c)
<tr>
<td class="inf" data-id="{{ $c->id }}"> {{ $c->id }} </td>
<td class="inf" data-cel="{{ $c->cel}}"> {{ $c->cel}} </td>
<td class="inf" data-tel="{{ $c->tel}}"> {{ $c->tel}}</td>
<td class="inf" data-email="{{ $c->email }}"> {{ $c->email }} </td>
<td>
<button class='btn btn-primary btnAlterarContato' type="button">Alterar</button>
</td>
</tr>
#endforeach
#endif
</tbody>
</table>
</div>
You can see that each row has its data attribute for creating data. I made a method that I can retrieve the data from the TD and alter them, however I can not change the data of the data. how do I change how information that is without data attribute?
$('.btnAlterarContato').click(function(){
var Row= $(this).closest('tr');
var Posicao = 1;
// Switch: 1 = Id, 2 = Cel, 3 = Tel, 4 = Email
Row.find('td').each(function(){
switch(Posicao)
{
case 2: $(this).text('new value '); $(this).attr('data-cel', 'Hi');
$(this).data('data-cel','Hi') ;break;
}
Posicao++;
});
});
I have a repeat loop to walk on every table td, and in case position 2 is the value of cel, I would like to change your display item and your cell-date when I do $ (this) .text ('new value ') this works, but I can not change the mobile date, how do I do this?
For changing data attribute use .data() like below:-
$(this).data('cel', 'Hi');
Note:- Once clear your browser cache and check
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.
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)
...
};