I am trying to hide/reveal table rows based on checking a checkbox.
Here it is http://dbdev2.pharmacy.arizona.edu/wideproblem.html
How do I get the hidden row to properly display at the width of the table? I've even tried setting it as a css attribute for that row, and it doesn't work.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}
</style>
<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}
}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>
You have to use "table-row-group", not "block" as the value of the "display" property when showing the table row group (the <tbody>).
Related
Hi I want to create a simple page where a user enters a postcode an a filtered list is displayed from the read csv file matching the postcode. I have managed to read the file and can output to a table but I'm stuck on the query / filtering part and need to some guidance on connecting the dots. I am a newbie to Javascript and found some exmaples that either are not quite what I am lookingf for or didnt work".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Read CSV</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
table, th, td {
border: 1px solid;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<h1 class=>Search for your next visit from Us</h1>
<h2 class=>Enter your Postcode?</h2>
<form id="form">
<input class="form-control" id="user-input" placeholder="Enter Site Postcode">
<button id="button" class="btn btn-secondary">Find Visit!</button>
</form>
<table class="table" cellpadding="10">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Sitename</th>
<th scope="col">PostalCode</th>
<th scope="col">Service</th>
<th scope="col">NextDuty</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" charset="utf-8">
d3.text("sample_rev.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("div").attr("class", "container")
.append("table").attr("class", "table table-hover")
.append("tbody")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) {
return d;
}).enter()
.append("td")
.text(function(d) {
return d;
});
});
</script>
</tbody>
</div>
</body>
</html>
JavaScript Element.length returns invalid length while executing in Visualforce page.
I'm expecting body NodeList length to be 14. But after printing console.log('allDocElements length:: ',allDocElements.childNodes.length);
It return 10. how this is possible?
I'm executing it in Google Chrome.
View console output
<apex:page showHeader="false" sidebar="false">
<html>
<head>
<title>JS Addignment 1</title>
<style>
body {
text-align:center;
font-size:30px;
}
.center {
width:70%;
margin:15% auto;
border-collapse:collapse;
border:2px solid #000000;
}
table td {
border:2px solid #000000;
}
</style>
<script>
let dateContainer, dayContainer, timeContainer;
let allDocElements = document.getElementsByTagName('body')[0];
console.log('allDocElements::',allDocElements.childNodes);
</script>
</head>
<body>
<table border="1" style="" class="center" cellpadding="20">
<tbody>
<tr>
<td><label>Date: </label><span id="dateContainer"/></td>
<td><label>Day: </label><span id="dayContainer"/></td>
</tr>
<tr>
<td colspan="2"><span id="timeContainer"/></td>
</tr>
</tbody>
</table>
</body>
</html>
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
How to get new rows onClick only when one line of previous inputs is not empty?
*"one line of previous inputs" - I have 1 row of blank inputs, as soon as I click on it, next row will be created, but I that 1st row is going to be empty or partialy full, than I dont want to create a new row.
The following code is what I have so far which is:
- first row created onLoad
- when clickin on input new row is created
- checkempty funcion is ready to use
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
input{width:76px;height:20px;padding:0;margin:0;display:block;float:left}table{padding:0;margin:0;border:thin dotted #333}tr{padding:0;margin:0}td{width:80px;height:20px;padding:0;margin:0;text-align:center}
</style>
<script language="javascript" type="text/javascript">
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var RowCount = 11;
for (i = 1; i <= RowCount; ++i) {
var td = document.createElement("td")
td.appendChild(document.createElement("input"))
td.id = "td" + i;
td.setAttribute("onclick", "javascript:addRow('myTable');")
row.appendChild(td);
}
tbody.appendChild(row);
}
function checkempty() {
checking = document.getElementById(cellId);
if (checking.value == "" || " " || null) {
return false;
} else {
return true;
}
}
</script>
</head>
<body onLoad = "javascript:addRow('myTable')">
Add row
<table id="myTable">
<tr>
<td>#</td>
<td>CHECK</td>
<td>DATE</td>
<td>HOUR</td>
<td>MIN</td>
<td>MARKET</td>
<td>MAX</td>
<td>BUY</td>
<td>SELL</td>
<td>PROFIT</td>
<td>FLIP TIME</td>
</tr>
</table>
</body>
</html>
Here is a quick example using jquery ( quickly tested in ff 11 && chrome) :
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
body{
padding:0px;
margin:0px;
font-size:11px;
color:#333;
font-family:Arial;
background:#efefef;
text-align:center;
}
#content{
width:600px;
padding:15px;
margin:20px auto;
background:#fff;
border:solid 1px #ddd;
text-align:left;
}
table{
width:100%;
padding:0;
margin:0;
border:solid 1px #ddd;
border-collapse:collapse;
}
tr{
padding:0;
margin:0
}
td{
width:80px;
height:20px;
padding:4px;
margin:0;
border:solid 1px #ebebeb;
text-align:center
}
table#myTable td input[type="text"]{
padding:2;
margin:0;
display:block;
border:solid 1px #ddd;
}
table#myTable td input[type="text"].incomplete{
border:solid 1px #ff0000;
}
th{
font-size:11px;
border:solid 1px #ddd;
background:#efefef;
text-align:center;
color:#999;
}
#addRow{
padding:3px;
width:80px;
text-align:center;
text-decoration:none;
background:#0000ff;
color:#fff;
margin:10px 0px;
font-weight:bold;
font-size:10px;
display:inline-block;
}
#message{
color:#DB1925;
padding:4px;
font-size:10px;
font-weight:bold;
border:dotted 1px #DB1925;
background:#FFBABA;
display:inline-block;
opacity:0;
}
</style>
</head>
<body>
<div id="content">
Add row
<span id="message">Please complete inputs that are in red</span>
<br style="clear:both"/>
<table id="myTable">
<thead>
<tr>
<th>CHECK</th>
<th>DATE</th>
<th>HOUR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var rowTemplateHTML = '<tr class="dataRow"><td><input type="text" value=""/></td><td><input type="text" value=""/></td><td><input type="text" value=""/></td></tr>';
$(document).ready(function(){
var $tableBody = $('#myTable'),
$addRowButton = $('#addRow'),
$message = $('#message');
$addRowButton.click(function(event){
event.preventDefault();
$('.incomplete').removeClass('incomplete');
addRow();
});
function addRow(){
if(previousRowNotEmpty()){
$message.css("opacity", "0");
$tableBody.append(rowTemplateHTML);
}else{
//alert('please complete previous row');
$message.animate({
"opacity" : "1"
}, 50);
}
}
function previousRowNotEmpty(){
var rowComplete = true;
$tableBody.find('tr.dataRow:last').find('input[type="text"]').each(function(index, input){
var $input = $(input);
if($input.val() === ""){
$input.addClass('incomplete');
rowComplete = false;
}
});
return rowComplete;
}
function addFirstRow(){
$tableBody.append(rowTemplateHTML);
}
addFirstRow();
})
</script>
</body>
</html>
Adding to what Paul said -- You have many issues
First, the issues you have
1) onload = ....
Never set the onload event, but instead add to it. read https://stackoverflow.com/a/10017532/643500
2) setAttribute vs click
button_element.setAttribute('onclick','doSomething();'); // for FF
button_element.onclick = function() {doSomething();}; // for IE
3) set the onclick to the row instead of each cell
For the solution:
Steps are:
1) User clicks on a row, get the previous row -- or all rows, not sure what you want
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
...
}
}
2) Check each cell in that row
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
var cells = elem.previousSibling.childNodes;
for(i = 0 ; i < cells.length; i++){
if(!checkIfEmpty(cells[i])){
canInsertRow = true;
}
}
elem = elem.previousSibling;
}
}
here is an INCOMPLETE jsfiddle .. I just used it to mess around with your code -- Not in the writeCode-mode to write it all, but you should understand the concept http://jsfiddle.net/mHgms/12/
First, your checkempty function needs to accept a parameter, like: checkempty(cellId)
Second, your addrow function should give ids and names to the input elements, otherwise you won't be able to ever process the form in a sufficient way. Also give ids or data attributes to the rows.
Third, if you got your addrow function to do that, you only need to get the last row, extract the row id from a data attribute and use that to go through all input elements within that row. If at least one input element's value is not null your script can add a new row.
Has anyone ever given table columns the "fisheye" effect? Im talking about an expanding effect of the table columns when hovering the mouse over them. I'd love to see some code if anyone has tried this.
EDIT: ...or an accordian effect
It's not for a table, but here is the effect:
http://safalra.com/web-design/javascript/mac-style-dock/
While not a table-based solution, this is a quick proof-of-concept I whipped up using JQuery just to see if I could do a column based accordion effect. Maybe it can give you some inspiration...
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table > div:even").addClass("row");
$("#table > div:odd").addClass("altrow");
$("#table > div > div").addClass("normal");
$("div[class*='col']").hover(
function () {
var myclass = $(this).attr("class");
$("div[class*='col']").css("width","20px");
$("div[class*='"+myclass+"']").css("width","80px").css("overflow","auto");
},
function () {
$("div[class*='col']").css("width","40px").css("overflow","hidden");
}
)
});
</script>
<style type="text/css">
.row{
background-color: #eee;
float:left;
}
.altrow{
background-color: #fff;
float:left;
}
.normal{
width: 40px;
overflow: hidden;
float:left;
padding :3px;
text-align:center;
}
</style>
</head>
<body>
<div id="table">
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
<br style="clear:both" />
<div>
<div class="col1">Column1</div>
<div class="col2">Column2</div>
<div class="col3">Column3</div>
</div>
</div>
</body>
</html>
no javascript is necessary this took me only a few minutes to work out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<style type="text/css">
td {
border: thin black solid;
width: 3em;
height: 3em;
}
td:hover {
background-color: red;
width: 5em;
/*height: 5em;*/
/*uncomment the above if you also want to zoom the rows*/
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Maybe Magic Table is what you're looking for: http://www.grvisualisation.50webs.com/examples.html
Columns are a whole lot trickier than rows, however I'd do like this:
Apply a unique CSS class to each TD per column
Attach a MouseIn and MouseOut event
Select all elements with the columns class name, and apply a second "fisheye" class
On mouseout, remove the class.
EDIT: I misunderstood fisheye to be more like zebra striping with highlights...To do a fisheye on the columns would be tricky, do same process as I listed above, but apply an animation to each cell instead of a new css class.
I think Jonathan is on the right track. You'd need methods to find all cells in a column, as well as adjoining columns and rows. I think you could get a decent effect with just three levels of "zoom."
This is kind of ugly effect but works only with CSS's :hover you can use some JS to make it look smoother:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
table{
width: 150px;
height: 150px;
}
tr{
height: 20px;
}
tr:hover{
height: 30px;
}
td{
width: 20px;
border: 1px solid black;
text-align:center;
}
td:hover{
width: 30px;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
the code below uses css to make cell wider on :hover, and jquery to toggle (display) additional content in the given cell... and toggle it again (hide) when you are no longer hovering the cell.
http://jsfiddle.net/berteh/QDhcR/12/
CSS:
td {
border: thin black solid;
width: 3em;
}
td:hover {
background-color: YellowGreen;
max-width: 5em;
font-size: 130%;
}
Javascript:
$(document).ready(function() {
$('td').hover(function () {
$(this).find('.desc').toggle(300);
});
});
works on a simple table HTML:
<table>
<tr>
<th>row1</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
<tr>
<th>row2</th>
<td>1<div class="desc">descZ</div></td>
<td>2<div class="desc">descU</div></td>
<td>3<div class="desc">descI</div></td>
<td>4<div class="desc">descO</div></td>
</tr>
</table>