Basic Javascript : using onclick to print a table

Question

<!DOCTYPE html>
<html>
<head>
<title> Title </title>

<style type="text/css">
	table.tableizer-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;


} 
.tableizer-table td {
	padding: 4px;
	margin: 3px;
	border: 1px solid #ccc;

}
.tableizer-table th {
	background-color: #104E8B; 
	color: #FFF;
	font-weight: bold;


}

</style>
</head>
<body>
Please select your price range (per hour) :
<select id="valueDropdown">
  <option value="lessThanFive">below 5</option>
  <option value="betweenSixAndTen">6-10</option>
  <option value="tenPlus">10+</option>
 </select>

<button type="button" onclick="toggleTable();" >Search</button>

<div id="cheapestTable" style="display: none;>


<table class="tableizer-table" >
<tr class="tableizer-firstrow"><th>SCHOOLS</th><th>Booking </th><th>web site</th><th> Price per hour </th><th> Columna1 </th><th>Courses English</th><th>Language</th><th>Social Media</th><th>Location</th></tr>
 <tr><td>Brittannia</td><td>no</td><td>7</td><td> £4.00 </td><td>&nbsp;</td><td>General, Examn, 1to1, Business</td><td>English</td><td>&nbsp;</td><td>Manchester</td></tr>
 <tr><td>ABLE</td><td>no</td><td>8</td><td> £5.00 </td><td>&nbsp;</td><td>General, Examn, 1to1</td><td>English Spanish</td><td>F, T, S, in, I</td><td>Manchester</td></tr>
</table>

</div>



<script>
function toggleTable(){
var e = document.getElementById("valueDropdown");
if(e.options[e.selectedIndex].value === 'lessThanFive'){
document.getElementById('cheapestTable').style.display = "table"
}else{
document.getElementById('result').innerHTML="hi2";
}
}
</script>


  
</body>

</html>

I'm trying to print a table using Javascript when the user presses a button. The button works fine.

The table is quite complex. What I've tried so far is setting the original location of the table off the screen and then bringing it back when the user pressed the button.

Table:

<div id="cheapestTable">
<style type="text/css">
    table.tableizer-table {
    border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
 position: absolute ;
   top: -99px;
   left: -99px;
}

.. more here with formatting of individual cells etc.

Then when the button is pressed:

document.getElementById('cheapestTable').style.tableizer-table.left = "100px";
document.getElementById('cheapestTable').style.tableizer-table.top = "100px";

However the table is not appearing when the button is pressed.

Instead of moving it, why don't you just hide it with style.display = 'none'? — Barmar
– Barmar, Commented Nov 10, 2015 at 5:10
@Barmar I tried that before also but when it appeared again it would just print the style part as text — Jane
– Jane, Commented Nov 10, 2015 at 5:13
@Barmar that didn't fix it either. Here is my full code : pastebin.com/BSJA4nTg . Can you see what is wrong with it? Thanks for your help again! — Jane
– Jane, Commented Nov 10, 2015 at 5:18
Can you make a stack snippet or jsfiddle that demonstrates the problem? — Barmar
– Barmar, Commented Nov 10, 2015 at 5:20

marc_s · Accepted Answer · 2015-12-01 17:02:30Z

You're missing the closing quote in <div id="cheapestTable" style="display: none;>.

Also, the proper style to display the DIV is block, not table.

function toggleTable() {
  var e = document.getElementById("valueDropdown");
  if (e.options[e.selectedIndex].value === 'lessThanFive') {
    document.getElementById('cheapestTable').style.display = "block"
  } else {
    document.getElementById('result').innerHTML = "hi2";
  }
}

table.tableizer-table {
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.tableizer-table td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #ccc;
}
.tableizer-table th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}

Please select your price range (per hour) :
<select id="valueDropdown">
  <option value="lessThanFive">below 5</option>
  <option value="betweenSixAndTen">6-10</option>
  <option value="tenPlus">10+</option>
</select>

<button type="button" onclick="toggleTable();">Search</button>

<div id="cheapestTable" style="display: none;">


  <table class="tableizer-table ">
    <tr class="tableizer-firstrow ">
      <th>SCHOOLS</th>
      <th>Booking</th>
      <th>web site</th>
      <th>Price per hour</th>
      <th>Columna1</th>
      <th>Courses English</th>
      <th>Language</th>
      <th>Social Media</th>
      <th>Location</th>
    </tr>
    <tr>
      <td>Brittannia</td>
      <td>no</td>
      <td>7</td>
      <td>£4.00</td>
      <td>&nbsp;</td>
      <td>General, Examn, 1to1, Business</td>
      <td>English</td>
      <td>&nbsp;</td>
      <td>Manchester</td>
    </tr>
    <tr>
      <td>ABLE</td>
      <td>no</td>
      <td>8</td>
      <td>£5.00</td>
      <td>&nbsp;</td>
      <td>General, Examn, 1to1</td>
      <td>English Spanish</td>
      <td>F, T, S, in, I</td>
      <td>Manchester</td>
    </tr>
  </table>

</div>

Collectives™ on Stack Overflow

Basic Javascript : using onclick to print a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related