I have a bootstrap like this in main.html page:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
My requirement is:
When I click on any row of the table( either on the text or even in the space between two columns) it has to redirect to another Html page.
how can I do that?
try this code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table class="table table-striped" id="tableId">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script>
function addRowHandlers() {
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
alert("id:" + id);
window.location.href = "http://www.w3schools.com";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
window.onload = addRowHandlers();
</script>
</body>
</html>
You can also achieve this by using Javascript on tr (inline) :
<tr onclick="document.location = 'links.html';">
In this way you can set different links for different rows. Please check below updated HTML snippet :
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr onclick="document.location = 'http://www.google.com';">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr onclick="document.location = 'http://www.himanshu.com';">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr onclick="document.location = '/links.html';">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Please find below the code that will redirect you to another link on click of any rows (except header row)
Add click event on all the rows inside the table body and execute your task.
$(function() {
$('tbody tr').click(function() {
window.location.href = 'https://www.google.com';
})
})
)
First, i suggest to add class to <tr> tag (so if you plan to have multiple tables in page it does not affect other table)
Then, i assume your using jquery and you have dynamic table rows.
#.link is the class <tr class="link" data-href="https://google.com">...</tr>
#:not(a) => added this so you can add other link `<a>` to your row (remove it if not needed...)
// same page redirect
$(document).on('click', 'tr.link:not(a)', function(e){
e.stopPropagation(); // only add this if you have <a> tag in row
window.location.href = $(this).data('href'); // dynamic link
});
// new tab redirect
$(document).on('click', 'tr.link', function(){
$('External Link')[0].click();
});
It can be done using jQuery. Bind an event listener on click of TR and then redirect the user as needed.
Your HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
jQuery Code
$(function() {
$('tr').on('click', function() {
document.location.href = 'https://google.com';
});
});
Plain JavaScript
var table = document.getElementById('js-table');
for(var i = 0; i < table.rows.length; i++) {
table.rows[i].addEventListener('click', function() {
document.location.href = "https://google.com"
});
}
Related
This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?
Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.
The table below contains a sticky table header, however I would like a few of the table header cells to be rotated. The issue here is that currently these table header cells (<th> elements) will be appearing outside of the screen or table header itself (<thead> element).
Is it possible to make a sticky table header with rotated header cells?
Working table with sticky header (optional sample code):
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
Broken table with sticky header (this piece of code contains what I am trying to do):
Added style="transform: rotate(-90deg); text-align: center;" to a <th> element.
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" style="transform: rotate(-90deg); text-align: center;">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
(To replicate the problem, please try to scroll down and see the result. The table header will not be entirely visible and when assigning a background-color to all the <th> elements, it will appear outside of the <thead> as well).
The reason for the rotation is because I want to save some space in width of the table by changing table header orientation.
Am I required to rather write some JavaScript for this kind of behaviour or will plain CSS be able to solve this issue too?
You could instead of rotating the text as a block, have the text written in a top-to-bottom instead of left-to-right orientation:
(Thanks to Константин Ван for the inspiration)
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
.sticky-table thead tr th.vertical {
-webkit-text-orientation: upright;
-webkit-writing-mode: vertical-rl;
text-orientation: upright;
writing-mode: vertical-rl;
text-align: center;
}
.sticky-table thead tr th.vertical span.chromeFix
{
text-orientation: upright;
writing-mode: vertical-rl;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="vertical"><span class="chromeFix">First</span></th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
Notes
Having checked in Edge, this might not be the best solution, as it's not compatible with all browsers.
Thanks to Turnip for pointing out that this only works in Chrome if you wrap the text in a span or some such thing.
The question I have a table pulling from the backend for events, will list out in the font in 3 different column with specific categories, but sometimes only have 1 event or 2, but I need to at least display 3 items.
So I try to use jQuery each function to check how many rows in the table if only have 1 add 2 rows if only have 1 row add 2 instead.
So the table will be same height no matter how many events display.
My code doesn't work correctly, so I was hoping anyone can help me out with this.
Here's my sample code:http://jsfiddle.net/s2devfrg/
Here's the jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if(number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})
The selector you are using on .each is wrong. There are no elements with the passed id.
Also there are couple of blank tr's in your html which I have removed.
Try this code below:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.log('amount' + number);
//if table only have one add two extra row
if(number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if(number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
})
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<div class="row">
<div class="col">
<table class="table">
<thead class="table-amount">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Updated fiddle link
I have reviewed you sample code, first of all kindly note that in jQuery
when you find tr it will count total number of rows including tr inside thead.
So your
total counts are always one more than actual rows.
Second thing you should not append just tr you should provide same structure
as in
your existing rows.
Also in first table structure you had one extra th may be typo.
In first and third table structure you have one tr extra with empty
structure
instead, you should have same structure as you have for others.
here is the link for modified JS Fiddle link
https://jsfiddle.net/patelmurtuza/kj8zgqad/
I want to allow the user to reorder the columns in the table by dragging and dropping them. I am using jquery.dragtable.js to allow drag and drop and save the order after drag and drop even reload the page. Here I used localStorage to store table order as option provide by plugin JS. Its working with only a single table. In More than one table with name column header, its not working.
Actually, It's overwrite the previous localStorage variable with another table order value.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Reorder</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>
<link rel="stylesheet" type="text/css" href="dragtable.css" />
</head>
<body>
<table id="tblReg" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
<hr>
<table id="tblRegMaster" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
Jquery -
$(document).ready(function(){
var tblReg = $('#tblReg').attr('id');
var tblRegMaster = $('#tblRegMaster').attr('id');
processDnD(tblReg);
processDnD(tblRegMaster);
});
function processDnD(cuTable){
$('#'+cuTable).find('th').each(function() {
var ctxt = $(this).text();
if(ctxt == 'First Name'){
$(this).attr('id','firstName');
}else if(ctxt == 'Password'){
$(this).attr('id','password');
}else if(ctxt == 'Email'){
$(this).attr('id','iemail');
}else if(ctxt == 'Username'){
$(this).attr('id','Username');
}else if(ctxt == 'Last Name'){
$(this).attr('id','lastName');
}else if(ctxt == '#'){
$(this).attr('id','slNo');
}else if(ctxt == 'Phone'){
$(this).attr('id','phone');
}
})
$('#'+cuTable).dragtable({
persistState: function(table) {
if (!window.localStorage) return;
var ss = window.localStorage;
table.el.find('th').each(function(i) {
if(this.id != '') {table.sortOrder[this.id]=i;}
});
ss.setItem('setTableOrder', JSON.stringify(table.sortOrder));
},
restoreState: eval('(' + window.localStorage.getItem('setTableOrder') + ')')
});
$('#'+cuTable).each(function(){
$(this).dragtable({
placeholder: 'dragtable-col-placeholder',
items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
appendTarget: $(this).parent(),
scroll: true
})
});
}
I would like to work reoder multipule table. Please suggest any solution. Thanks
Plugin Refer: https://github.com/akottr/dragtable
I have solved this problem you can check on jsFiddle from below url. I hope this snippet help you.
jsfiddle.net/raeeshalam/rn8sxxba
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>