How get td click event from bootstrap table? - javascript

I am trying attribute a event to cells of differents columns of my bootstrap table.
The problem is: Although I have set a class to each column, the events attributed to this classes are not fired. I still tried set a class to each div added in cells, but its event also wasn't fired.
So, how can I get a td event using bootstrab table?

Here is the complete code for td click event for bootstap table
$(document).ready(function(){
$('table td').click(function(){
alert($(this).html());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Click on the td below</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Until you are showing us some code, you can try this,
$('body').on('click', '#tableID tr td', function(){
//whenever any td is clicked, this function will get called
});
you can change 'click' with whatever event name you want to bind your td with.
I am delegating the event to body, because if you dynamically add your table elements to your html, direct binding to those events will not fire/work.

try This
$("#boottable").on('all.bs.table', function (e, name, args) {
console.log(name, args);
});

Related

How to use DataTable in Thymeleaf?

How to use datatable in thymeleaf. i have created a table in which i am creating a div inside of td for all the user present in userInfo list
How can i show only one user record as a div and inside of pagination section display only next and previous buttons.
Currently i am getting error jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
I found some answer related to it as dataTables requires a well formed table. It must contain and . But i just want to display one div and hide other div when next button is clicked new div should be visible and hide the previous one
<table id="table_id">
<tr>
<td th:each="info : ${userInfo}">
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</table>
In js i just have written this
$(document).ready( function () {
$('#table_id').DataTable();
} );
The following example shows one way in which you can use Thymeleaf to populate a table, and then use DataTables to display one row at a time (with "previous" and "next" buttons):
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<style>
.dataTables_paginate {
float: left !important;
}
</style>
</head>
<body>
<div style="margin: 20px; width: 150px;">
<table id="table_id">
<thead>
<tr>
<td>Users</td>
</tr>
</thead>
<tbody>
<tr th:each="info : ${userInfo}">
<td>
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#table_id').DataTable({
"dom": "tp",
"ordering": false,
"pagingType": "simple",
"lengthMenu": [ 1 ]
});
});
</script>
</body>
</html>
This creates a very simple display like this, with almost no CSS styling applied:
The Thymeleaf iterator needs to be placed in the tably body's <tr> tag, not in a cell tag.
The HTML table must be defined with both a <thead> and a <tbody> section, for DataTables to be able to use it.
The DataTables options are:
"dom": "tp" - displays only the table (t) and the pagination (p) controls.
"ordering": false - disables column ordering.
"pagingType": "simple" - shows only the "previous" and "next" buttons.
"lengthMenu": [ 1 ] - forces DataTables to show only one row at a time

position of element off by one pixel for top and left, in Firefox , correct in Chrome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table id="over" style="background-color:yellow;position:absolute;top:0px;left:0px">
<tr>
<td>xxxxxxx</td>
</tr>
<tr>
<td>yyyyyyy</td>
</tr>
</table>
<table id="t1">
<tr>
<th>head1</th>
<th>head</th>
<th>head</th>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
<tr>
<td>aaaaaaa</td>
<td>bbbbbbbbb</td>
<td>ccccccc</td>
</tr>
</table>
<script>
tab = document.getElementById('t1');
rect = tab.rows[1].getBoundingClientRect();
over = document.getElementById('over');
over.style.left = rect.left + 'px';
over.style.top = rect.top + 'px';
</script>
</body>
</html>
I want to overlay part of a table t1, with another table, overlay,by positioning the overlay table using the absolute position of top/left of the first row, in table t1.
The given position of the first row form t1 is correct in Chrome, but off by +1
in Firefox for top/left.
Firefox gives this
Chrome this:
If you run the above code you will see the offset in Firefox and Edge.
In Chrom, Opera and Brave you will not see the offset.
This is annoying as I need exact positions for what I want to achieve.
Any Ideas ?
Regards
I have entered a defect against Firefox
Bug 1559098
The defect is meanwhile 'confirmed'.
Regards
Heinz

Consolidating Click Functions & Scalability

How can I simplify and consolidate these two click functions into one, and make it scalable for future table row classes? My code works, but it's not very scalable.
See Fiddle: https://jsfiddle.net/49hvfdje/10/
<!DOCTYPE html>
<html>
<head>
<style> .hidden { display: none; } </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.click.a').click(function() {
$('tr.a').toggleClass('hidden'); // toggleClass for A rows
return false;
});
$('a.click.b').click(function() {
$('tr.b').toggleClass('hidden'); // toggleClass for B rows
return false;
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr><td><a class='click a'>Toggle A Rows</a></td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr class='hidden a'><td>Text</td></tr>
<tr><td><a class='click b'>Toggle B Rows</a></td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
<tr class='hidden b'><td>Text</td></tr>
</tbody>
</table>
</body>
</html>

Hide specific row from table without ID

I have simple table generated by PHP.
<table border="1" id="control>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr> //Row #3
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
I would like to hide 3rd row when page loads using javascript or css. Is there any way to do this without giving 3rd row ID?
Thank you in advance
with css3 you can use the :nth-child selector
#control tr:nth-child(3)
{
display:none;
}
using jquery its pretty simple, $('#control tr:eq(2)').hide()
Try this
document.getElementsByTagName("tr")[2].style.display = 'none';
Using pure JavaScript (no framework like JQuery etc.) one can do:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" id="control">
<tbody>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
<tr><td>row5</td></tr>
<tr><td>row6</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tableElm = document.getElementById("control");
var tableChilds = tableElm.getElementsByTagName("tr");
var row3 = tableChilds[2];
row3.style.display = "none";
// alternatively:
//row3.style.visibility = "hidden";
</script>
</body>
</html>
Use jQuery's eq(int) to select the row at the zero-based index:
$("#control tr").eq(2).hide();

Table with twitter bootstrap and jQuery

I have this js part of script:
jQuery.each(data, function(index, value) {
$("table_div").append("<td>" + value + "</td>");
});
I want use this for create a table with twitter bootstrap. In the html page there is this table element:
<table class="table table-striped" id="table_div">
</table>
But this solution doesn't works. How I have to do? Thank you!
First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.
You should take a look at this as well as here and here.
You should use tbody when using Twitters Bootstrap anyways for example, like so:
<table id="table_div" class="table table-striped">
<tbody></tbody>
<table>
here the right js
for (i in data) {
$('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}
For more research look here Add table row in jQuery
Edit:
Ok i wrote you an entire example using twitters bootstrap and jQuery.
This works, if it doesn't for your data array, something is wrong with it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
$.each(data, function(i,item){
$('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
});
});
</script>
</body>
</html>

Categories