I'm having a table in my react application. I'm trying to implement click event like this:
$('#detailedTable tbody').on('click', 'tr', function() {
//var row = $(this).parent()
if ($(this).next('tr').hasClass('row-details')) {
$(this).next().toggle();
return;
}
})
I placed this inside componentDidMount method.
This is my table:
<table className="table table-hover table-condensed table-detailed"
id="detailedTable" ref={node => this.table_el = node}>
<thead>
<tr>
<th className="sorting_disabled wd-5p"></th>
<th >Title</th>
<th className="wd-15p">Channel</th>
<th className="wd-10p">File Type</th>
<th className="wd-15p">Uploaded</th>
<th className="wd-20p">Process</th>
<th className="wd-10p">Status</th>
</tr>
</thead>
{ this.state.MediaFiles.map((item, i) => (
<tbody>
<tr onClick={this.rowClick} id={i}>
<td className="v-align-middle">
<div className="checkbox">
<input type="checkbox" value="3" id={"checkbox1" + i}/>
<label htmlFor={"
But the click event is not getting fired. What is wrong?
Click event works perfectly with the following HTML:
$('#detailedTable tbody').on('click', 'tr', function() {
console.log('click works!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table className="table table-hover table-condensed table-detailed" id="detailedTable" ref={node => this.table_el = node}>
<thead>
<tr>
<th className="sorting_disabled wd-5p">
</th>
<th>Title</th>
<th className="wd-15p">Channel</th>
<th className="wd-10p">File Type</th>
<th className="wd-15p">Uploaded</th>
<th className="wd-20p">Process</th>
<th className="wd-10p">Status</th>
</tr>
</thead>
<tbody>
<tr onClick={this.rowClick} id={i}>
<td className="v-align-middle">
TBODY ITEM (click it)
</td>
</tr>
</tbody>
</table>
$(document).on('click', '#detailedTable tbody tr', function() {
//var row = $(this).parent()
if ($(this).next('tr').hasClass('row-details')) {
$(this).next('tr').toggle();
return;
}
});
Related
I'm trying to find on click a data attribute from the tr element of a table with the delegated click event, but it doesn't return anything, what am I wrong?
I made a fiddle to try and test
document.querySelector('table#listaCar tbody').addEventListener('click', e => {
if (e.target.matches(".car-item")) {
alert(e.target.getAttribute('data-id-car'));
}
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
e.target is the td, not the tr.
Easiest solution is to use .parentNode to get the td's parent: the tr then you can test using matches and get the data attribute as desired
const tr = e.target.parentNode;
if (tr.matches(".car-item")) {
alert(tr.getAttribute('data-id-car'));
}
document.querySelector('table#listaCar tbody').addEventListener('click', e => {
const tr = e.target.parentNode;
if (tr.matches(".car-item")) {
alert(tr.getAttribute('data-id-car'));
}
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
You need to do a test on the element click to see if it is a table cell (TD) and if it is grab the parent.
In my example I am looping through all the rows to apply the click.
document.querySelectorAll('.car-item').forEach(item => {
item.addEventListener('click', e => {
let el = e.target.tagName === "TD" ? e.target.parentElement : e.target;
alert(el.getAttribute('data-id-car'));
});
});
table#listaCar tbody tr {
cursor: pointer;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table id="listaCar" class="table table-bordered table-hover bg-white">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<th scope="col">N. IUV</th>
</tr>
</thead>
<tbody>
<tr data-id-car="4140" class="car-item">
<td>4140</td><td>TO PAY</td><td>13-05-2022</td><td>10</td>
</tr>
<tr data-id-car="4129" class="car-item">
<td>4129</td><td>TO PAY</td><td>12-05-2022</td><td>15</td>
</tr>
</tbody>
</table>
I have a bootstrap table as follows:
<table id="fullDataTable"
class="table table-bordered"
data-toggle="table"
data-classes="table"
data-striped="true"
data-sort-name="numFrame"
data-sort-order="desc">
<thead>
<tr>
<th class="col-sm-1"
data-field="numFrame"
data-sortable="true">numFrame</th>
<th class="col-sm-1"
data-field="timeStamp"
data-sortable="false">timeStamp</th>
<th class="col-sm-1"
data-field="id_robot"
data-sortable="false">idRobot</th>
</tr>
</thead>
<tbody id="dataTable">
</tbody>
</table>
The table is then filled dynamically with values from a MySQL database with Javascript:
socket.on('gotDataQuality', function(message) {
if(message == 0){
alert('No Quality datas for this session');
clearElement("dataTable");
}else{
clearElement("dataTable");
for (var i = message.length-1; i >= 0; i--) {
$('#dataTable').prepend('<tr><td>'+message[i].numFrame+'</td><td>'+message[i].timeStamp+ '</td><td>'+message[i].idRobot+'</td></tr>');
}
}
});
The table fills correctly but when I attempt to sort it (by clicking on one of the sortable headers) the contents of the table is erased. I'm not entirely sure how the data-sort element works, what can I do to resolve this?
You can use List JS
You can make use of this example
var options = {
valueNames: [ 'id', 'firstname', 'lastname','username' ]
};
var userList = new List('table', options);
.table [data-sort] {
cursor: pointer;
}
.table [data-sort]::after {
margin-left: .25rem;
content: url('data:image/svg+xml;utf8,<svg width=\'6\' height=\'10\' viewBox=\'0 0 6 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path fill-rule=\'evenodd\' clip-rule=\'evenodd\' d=\'M3 0L6 4H0L3 0ZM3 10L0 6H6L3 10Z\' fill=\'%238898aa\'/></svg>');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div id="table">
<table class="table">
<thead>
<tr>
<th scope="col" class="sort" data-sort="id">#</th>
<th scope="col" class="sort" data-sort="firstname">First Name</th>
<th scope="col" class="sort" data-sort="lastname">Last Name</th>
<th scope="col" class="sort" data-sort="username">Username</th>
</tr>
</thead>
<tbody class="list">
<tr>
<th scope="row" class="id">1</th>
<td class="firstname">Mark</td>
<td class="lastname">Otto</td>
<td class="username">#mdo</td>
</tr>
<tr>
<th scope="row" class="id">2</th>
<td class="firstname">Jacob</td>
<td class="lastname">Thornton</td>
<td class="username">#fat</td>
</tr>
<tr>
<th scope="row" class="id">3</th>
<td class="firstname">Larry</td>
<td class="lastname">the Bird</td>
<td class="username">#twitter</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
CodePen
I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.
Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
I'm using bootstrap table. In that I want to perform an action when i click on checkbox in table to get Item ID value.
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="data/g3.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
Jquery function :
$("input[name='btSelectItem']").on("click","input[name='btSelectItem']",function(){
alert("Hello");
var values = "";
$.each($("input[name='btSelectItem']:checked"), function(index, value) {
var data = $(this).parents('tr:eq(0)');
if(index > 0)
values ++;
values +=$(data).find('td:eq(1)').text();
});
alert(values);
});
When i click on checkbox my function was not calling, Kindly help me to resolve this. Thanks in advance
Below is my table Code :
<table id="eventsTable" class="table table-striped table-hover" data-id-field="id" data-toolbar="#toolbar" data-show-columns="true" data-show-toggle="true" data-show-refresh="true" data-search="true" data-url="data/g3.json" data-height="300" data-toggle="table" style="margin-top: -41px;">
<thead>
<tbody>
<tr class="selected" data-index="0">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="0">
</td>
<td style="">Test</td>
<td style="">21</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">High</td>
<td style="">100</td>
</tr>
<tr data-index="1">
<td class="bs-checkbox">
<input type="checkbox" name="btSelectItem" data-index="1">
</td>
<td style="">Test2</td>
<td style="">26</td>
<td style="">High</td>
<td style="">Low</td>
<td style="">Medium</td>
<td style="">50</td>
</tr>
<tr data-index="2">
<tr data-index="3">
<tr data-index="4">
<tr data-index="5">
<tr data-index="6">
<tr data-index="7">
</tbody>
</table>
Besides the selector was wrong, the problem is that bootstrap table js code captures the event when you click and stops its propagation, so it never bubbles up and you can't capture on a document level.
The good news is that it provides an API to capture such events. In this case you can use several events like onCheck, onCheckSome, as noted in the docs, e.g.:
$('#table-style').on("check.bs.table", myFunc);
Since you're already attaching the event handler to the input element, you don't need any further filter in on.
Try with:
$(document).on("click", "input[name='btSelectItem']", function(){ ... })
I've been trying to figure out a wait to get this to work with having multiple tables on a single web page.
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<script>
var time = $('.time').text();
$(function() {
$('table td:nth-child(2)').attr('data-before-content', time);
$('table td:nth-child(3)').attr('data-before-content', time);
$('table td:nth-child(4)').attr('data-before-content', time);
$('table td:nth-child(5)').attr('data-before-content', time);
});
</script>
CSS:
.table td:nth-child(2)::before {
content: attr(data-before-content);
}
Trying to figure out a way to get the context of each "th" and place it ::before in the CSS while having multiple tables. Any suggestions?
Are you thinking something along the lines of this? You can use a combination of .each(), .eq(), and .not()
$('table tr').each(function(){
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $('.time').eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
In case the .time data is table specific (which is more likely the case I would think), I'd recommend using this instead:
$('table tr').each(function(){
var $t = $(this).closest('table').find('.time');
$('td', this).not(':first-child').each(function(i){
$(this).attr('data-before-content', $t.eq(i).text());
});
});
.table td:before {
content: attr(data-before-content) '\00a0';
}
.table td {
padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped basic">
<thead>
<tr>
<th>Saturday</th>
<th class="time">10:30am</th>
<th class="time">11:00am</th>
<th class="time">11:30am</th>
<th class="time">12:00pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
<tr>
<td>3/5/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
<td>15234</td>
</tr>
</tbody>
</table>
<table class="table table-striped basic">
<thead>
<tr>
<th>Monday</th>
<th class="time">7:30pm</th>
<th class="time">9:00pm</th>
<th class="time">10:30pm</th>
</tr>
</thead>
<tbody>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
<tr>
<td>3/7/2016</td>
<td>15231</td>
<td>15232</td>
<td>15233</td>
</tr>
</tbody>
</table>
var time = $('.time'); returns an all the text of all element with the class .time. Instead, you should use something like $('.time:nth-child('+i+')').text() inside a for-loop.
<script>
var time = $('.time');
$(function() {
for(var i = 0, len=time.length; i<len; i++){
$('table td:nth-child(' +i+ ')').attr('data-before-content', $(time[i]).text());
}
});
</script>