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.

Answer 1

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>

Basic Javascript : using onclick to print a table

Question

1 answers

solution1
1 ACCPTED 2015-11-10 05:28:43

Basic Javascript : using onclick to print a table

Question

1 answers

solution1 1 ACCPTED 2015-11-10 05:28:43

solution1
1 ACCPTED 2015-11-10 05:28:43