I'm searching for a jquery popup that has a vertical scrollbar and that allows to show data as if it were imitating a Datagrid, except for the fact that rows are not visible.
I mean something like that should be showing in the popup
Field1 Field2 Field3
Value1 Value1 Value1
Value2 Value2 Value2
And if the lentgh of the elements that form the column is longer than the height of the screen a vertical scrollbar should display and allow to displace the values.
I've searched for it some time and I don't find anything, so I hope you can help me with this thing, as it seems to be very time consuming to do it from scratch.
Although I've been ordered to do it via jquery it doesn't really matter much as long as it works, so feel free to name other alternatives, that are more and less made, if they exist, the only limitation is that it has been done on client side using JavaScript as the rest of the code is done on that.
Thanks for your help.
For the dialog you could use jQuery UI. To meet the rest of the requirements just add a bit of css. Here you have an example of your case. I hope it helps you:
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<style>
#dialog-content {
height: 200px;
/* Show scrolls if overflows! */
overflow: scroll;
}
#dialog-content th,
#dialog-content td {
/* Big rows! */
padding: 20px;
}
</style>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<div id="dialog-content">
<table>
<thead>
<tr>
<th>Field1</th>
<th>Field2</th>
<th>Field3</th>
<th>Field4</th>
<th>Field5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
<td>Value4</td>
<td>Value5</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
I am trying to display a hidden table in a div then hide it again with display: none/block toggle. It works. But, I can't get it to appear again once I toggle to display: none to hide it.
HTML:
The HTML has an empty div with id = tableContainer.
Next to it, I have a table with the names of animal families in each cell, along with a button. When the button is clicked, it takes the name of the animal family from that particular cell, finds the table of animal species with that name and switches from display: none to display:block and display it /inside the div. Then, if I click the button again, it toggles the display back to display: none.
When I click a button in another cell, it clears the div and displays the new table.
All good.
But, if I click a button that was previously used, the table that has now gone is no longer available.
I have gone through all sorts of hoops playing with removeChild and all that but no luck. I am currently using innerHTML to clear the div, but I'm missing something with the class name.
Console error says: tabletest2.html:523 Uncaught TypeError: Cannot read property 'classList' of null
at toggle (tabletest2.html:523)
at HTMLButtonElement.onclick (tabletest2.html:72)
So, it seems to me that it can't toggle any more because the table now no longer exists, or I may be wrong with that as I didn't delete the child element (I think).
<body>
<table>
<tbody>
<tr>
<td>Genus</td>
<td>Benthobatis
<button onclick="toggle(this, parentNode.firstChild)">Click me</button></td>
</tr>
<tr>
<td>Genus</td>
<td>Diplobatis
<button onclick="toggle(this, parentNode.firstChild)">Click me</button></td>
</tr>
</tbody>
</table>
<!-- <======== div display container here ================>-->
<div id="tableContainer"></div>
<table id="Benthobatis" class="hide">
<tbody>
<tr>
<th>Genus</th>
<th>Benthobatis</th>
</tr>
<tr>
<td>Benthobatis kreffti</td>
<td>Brazilian Blind Electric Ray</td>
</tr>
</tbody>
</table>
<!-- <==================================-->
<table id="Diplobatis" class="hide">
<tbody>
<tr>
<th>Genus</th>
<th> Diplobatis </th>
</tr>
<tr>
<td>Diplobatis colombiensis</td>
<td>Colombian electric ray</td>
</tr>
</tbody>
</table>
</body>
<script>
function toggle(ele, tableName) {
var myTableDisplayDiv = document.getElementById("tableContainer").childNodes;
if (myTableDisplayDiv.length != 0) {
document.getElementById("tableContainer").innerHTML = "";
}
var myTableName = tableName.textContent;
var myTable = document.getElementById(myTableName);
myTable.classList.toggle("hide");
document.getElementById("tableContainer").appendChild(
document.getElementById(myTableName)
);
}
</script>
<style>
.hide {
display: none;
}
Explanations
"Why are my tables deleted if I'm only changing display option, not removing the child node?".
This destroys everything within:
document.getElementById("tableContainer").innerHTML = "";
This moves the chosen table to #tableContainer:
document.getElementById("tableContainer").appendChild(
document.getElementById(myTableName)
So in three clicks there's nothing left. Of course this is if the table can be identified correctly which it wasn't. The .textContent of .parentNode.firstChild reference was lost because this refers to a global context not the button. This is why on-event attributes (among other various reasons) are discouraged. Although not a critical issue as the ones previously mentioned, you should seriously have some variations to the names:
tableName
myTableName
myTable
myTableDisplayDiv
tableContainer
I'm pretty sure this naming scheme did not facilitate debugging.
Solutions
Before you place a table into #tableContainer where it gets destroyed, make a copy with .cloneNode().
Remove the onclick attributes and either use onclick property (like in the demo) or .addEventListener().
Register an ancestor element of both buttons (i.e. tbody), from there both buttons can be clicked and easily isolated and referenced by using event.target.
Now the reference to the clicked button (event.target) can now be referenced:
var tableName = event.target.parentNode.firstChild.textContent
And then the table can finally be referenced:
var table = document.getElementById(tableName)
Demo
document.querySelector('tbody').onclick = toggle;
function toggle(event) {
var clicked = event.target;
if (clicked.tagName === 'BUTTON') {
var genus = clicked.parentNode.firstChild.textContent;
var table = document.querySelector('#' + genus);
var display = document.getElementById("display");
display.innerHTML = "";
var clone = table.cloneNode(true);
display.appendChild(clone);
clone.classList.toggle('hide');
}
}
.hide {
display: none;
}
<table>
<tbody>
<tr>
<td>Genus</td>
<td>Benthobatis
<button>Click me</button></td>
</tr>
<tr>
<td>Genus</td>
<td>Diplobatis
<button>Click me</button></td>
</tr>
</tbody>
</table>
<!-- <======== div display container here ================>-->
<div id="display"></div>
<table id="Benthobatis" class="hide">
<tbody>
<tr>
<th>Genus</th>
<th>Benthobatis</th>
</tr>
<tr>
<td>Benthobatis kreffti</td>
<td>Brazilian Blind Electric Ray</td>
</tr>
</tbody>
</table>
<!-- <==================================-->
<table id="Diplobatis" class="hide">
<tbody>
<tr>
<th>Genus</th>
<th> Diplobatis </th>
</tr>
<tr>
<td>Diplobatis colombiensis</td>
<td>Colombian electric ray</td>
</tr>
</tbody>
</table>
Your code is kind of complex to understand but if you just want to toggle the table, I think this is the best way.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div class="table-container">
<button class="toggle-btn">Click me</button>
<table>
<tr>
<td>Genus</td>
<td>Benthobatis</td>
</tr>
<tr>
<td>Genus</td>
<td>Diplobatis</td>
</tr>
</table>
</div>
<script>
const table = document.querySelector('table'),
btn = document.querySelector('.toggle-btn');
btn.addEventListener("click", () => {
table.classList.toggle("hide")
})
</script>
</body>
</html>
I use a jquery plugin to sort my html table. It works well but I want to be able to "save my sort" after leaving the page and returning. if I leave the page and return - the sort starts over again.
I want to maintain the state of the sort - so when I return - it is entact how I left it...
Here is a working example...
https://rawgit.com/joequery/Stupid-Table-Plugin/master/examples/basic.html
here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Stupid jQuery table sort</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../stupidtable.js?dev"></script>
<script>
$(function(){
$("table").stupidtable();
});
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
th, td {
padding: 5px 10px;
border: 1px solid #999;
}
th {
background-color: #eee;
}
th[data-sort]{
cursor:pointer;
}
tr.awesome{
color: red;
}
</style>
</style>
</head>
<body>
<h1>Stupid jQuery table sort!</h1>
<p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code><th></code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p>
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>2</td>
<td>-152.5</td>
<td>apple</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>orange</td>
</tr>
</tbody>
</table>
</body>
</html>
The localStorage API is easy to use and can persist data between user sessions.
To store an item: localStorage.setItem('myCat', 'Tom');
And, to retreive an item: localStorage.getItem('myCat');
Keep in mind that all data is stored as strings.
I am working on a display page for a lot of data. some of the data is a short string, some of it is a long string(>200char) and some is numbers. My issue is this: When i create a a table and set its style, how do i make it so the style of the table sets a fixed size for the cells in that table, without manually setting it for each individual cell, becuase i have over 50 tables with 10 rows or more and each one has multiple cells.
I am asking this because the data I am entering seems to be resizing the cells to make it fit, and it crushes the adjacent cells, which cant happen.
Here is a sample of what i want:
<table style={table_style_sub}>
<tr>
<td><b>Client Name:</b></td>
<td>{client2}</td>
</tr>
<tr>
<td><b>Location:</b></td>
<td>{client2Location}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{client2Phone}</td>
</tr>
<tr>
<td><b>Emails:</b></td>
<td>{client2Email}</td>
</tr>
<tr>
<td style={cell_format}><b>Details:</b></td>
<td>{client2Service}</td>
</tr>
</table>
this is my table for example. Here is the formatting:
var table_style_sub={
margin: 'auto',
width: '400px',
marginBottom: '15px',
border: '1px dotted black'
}
is there any way to add to this table_style_sub to make every <td> of the appropriate table have a width of 'Xpx' without manually doing typing <td style={{width:"Xpx}}> over 300 times.
Here is the whole code if you want to see it to get an idea of how many lines i actually have: http://pastebin.com/6rzRz2Vj
You could try something like this in javascript itself,
In your code there seems to be a div with an id="messagesDiv" enclosing the table so could use that id and fetch the tds and then set their style to width in the javascript as shown below,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
<h3>Contact Information</h3>
<table style={table_style}>
<tr>
<td><b>Legal Name: </b></td>
<td>{legalEntity}</td>
</tr>
<tr>
<td><b>Operating Name:</b> </td>
<td>{operatingName}</td>
</tr>
<tr>
<td><b>Role: </b></td>
<td>{string_role[role]}</td>
</tr>
<tr>
<td><b>Address 1: </b></td>
<td>{address1}</td>
</tr>
<tr>
<td><b>Address 2: </b></td>
<td>{address2}</td>
</tr>
<tr>
<td><b>City:</b> </td>
<td>{city}</td>
</tr>
<tr>
<td><b>Province:</b></td>
<td>{province}</td>
</tr>
<tr>
<td><b>Country: </b></td>
<td>{country}</td>
</tr>
<tr>
<td><b>Postal Code:</b></td>
<td>{postalCode}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{phone}</td>
</tr>
<tr>
<td><b>Fax:</b></td>
<td>{fax}</td>
</tr>
<tr>
<td><b>Email:</b></td>
<td>{email}</td>
</tr>
<tr>
<td><b>Admin Contact:</b></td>
<td>{adminContact}</td>
</tr>
<tr>
<td><b>Techncal Contact:</b></td>
<td>{technicalContact}</td>
</tr>
</table>
</div>
</form>
<script>
var div=document.getElementById("messagesDiv");
var tds=div.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.width='200px';
}
</script>
</body>
</html>
I am trying to use javascript to hide a table if there is no data present. I am using Powershell to grab data from a spreadsheet; however, if there is no data in the spreadsheet the table is not required.
In a nutshell, if the td with an id of "hide if empty" does not contain any data can the div with div with id "sampleDIV" or the table with id "Tabletest" not be visible?
Is this possible?
Thank you :)
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hide if empty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
Am I doing something really silly?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script language ="javascript">
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
</script>
</head>
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<body>
</body>
</html>
if (document.getElementById("hideifempty").innerHTML === "") {
document.getElementById("SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideifempty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td>If you can see this it didn't hide</td>
<td></td>
</tr>
</tbody>
</table>
</div>
You may want to use .innerHTML.trim() === "" - up to you depending on whether you define an element with nothing but whitespace as "empty".
Note: Element IDs are not supposed to contain spaces (although that may work in some browsers), so I've changed the id to "hideifempty".
EDIT: Note that the above JS would need to be in a <script> element that is after the <div> in question, so e.g., you could follow the reasonably standard practice of putting scripts immediately before the closing </body> tag. Or you could wrap the above if statement in an onload or DOMContentLoaded handler. Otherwise the JS will run before the browser has parsed the div and table.
you try:
$('#TableTest tr').each(function() {
if ($(this).find('td:empty').length) $(this).hide();
});
or you can use css:
tr td:empty {
visibility: hidden;
height: 0;
}
td:not(:empty) ~ td:empty{
visibility: visible;
height: 100%;
}
Yes it is and here is how you can do that
if(document.querySelector("#hideIfEmpty").innerHTML.trim() == ""){
document.querySelector("#SampleDIV").style.display = "none";
}
<div id="SampleDIV">
<table id="TableTest">
<tbody>
<tr>
<td><b>Data:</b></td>
<td id="hideIfEmpty"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
You should probably add some checks to make sure the elements with the IDs hideIfEmpty and SampleDIV exist to prevent errors. Also, an element's ID can't contain spaces, that is why I've changed hide if empty to hideIfEmpty.
Firefox won't show and hide my table properly. Only Shows header on button press not row.
Basically what I'm wanting is for when the user clicks the button, the column header with the id "HideMe" and the rows of the same id are shown. This works perfectly in Chrome but not in Firefox
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
#HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$(HideMe).show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th id="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td id="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
This is in no way right
$(HideMe).show();
you may want to do something like:
$('#HideMe').show();
FIDDLE: http://jsfiddle.net/JS7tK/5/
I didn't notice at first but as bandi notes in his comment id should be unique.
So try to do something like:
<html>
<head>
<title>Show and Hide Javascript won't work in Firefox</title>
<style>
.HideMe {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
jQuery(document).ready(function ($) {
$('.ShowPassword').click(function () {
$('.HideMe').show();
});
});
</script>
</head>
<body>
<table>
<tr>
<th>ID Number</th>
<th>First Name</th>
<th>Middle Name</th>
<th class="HideMe">Password</th>
</tr>
<tr>
<td>2121</td>
<td>Mike</td>
<td>Daniel</td>
<td class="HideMe">Password</td>
</tr>
<button class="ShowPassword">Show Password</button>
</body>
<html>
I don't do jQuery, but as a rule you will undoubtedly be better off putting a span inside the & hiding it rather than trying to hide the cell, because doing that would unbalance the table so no great surprise that some browsers do not allow it.